feat: add support for superforms {_errors: string[]} errors (#129)

Co-authored-by: Weston Harper <[email protected]>

.changeset/kind-fireants-collect.md

@@ -0,0 +1,5 @@
+---
+"formsnap": patch
+---
+
+Adds support for superforms {\_errors?: string[]} syntax

package.json

@@ -67,7 +67,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"autoprefixer": "^10.4.14",
-		"bits-ui": "^0.9.0",
+		"bits-ui": "^0.17.0",
 		"clsx": "^2.0.0",
 		"concurrently": "^8.2.1",
 		"contentlayer": "^0.3.4",

src/lib/components/form-field.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { getCleansedErrors } from "..";
+
 	import { formFieldProxy } from "sveltekit-superforms/client";
 	import { writable } from "svelte/store";
 	import { createFormField, createIds } from "@/lib/internal/index.js";
@@ -18,16 +20,18 @@
 	export let name: Path;
 
 	const attrStore: FieldAttrStore = writable({});
-	$: ({ errors, value, constraints } = formFieldProxy<T, Path>(config.form, name));
+	$: ({ errors: rawErrors, value, constraints } = formFieldProxy<T, Path>(config.form, name));
+
+	$: errors = getCleansedErrors($rawErrors);
 
 	const ids = writable(createIds());
 
 	$: ({ getFieldAttrs, actions, hasValidation, hasDescription, handlers, setValue } =
-		createFormField<T, Path>(name, attrStore, value, errors, ids));
+		createFormField<T, Path>(name, attrStore, value, rawErrors, ids));
 
 	$: inputAttrs = getFieldAttrs({
 		val: $value,
-		errors: $errors,
+		errors: errors,
 		constraints: $constraints,
 		hasValidation: $hasValidation,
 		hasDescription: $hasDescription
@@ -56,7 +60,7 @@
 
 <slot
 	{stores}
-	errors={$errors}
+	{errors}
 	value={$value}
 	constraints={$constraints}
 	{handlers}

src/lib/components/form-validation.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
-	import { getFormField } from "@/lib/index.js";
+	import { getFormField, getCleansedErrors } from "@/lib/index.js";
 	import type { ValidationProps } from "../types.js";
 
 	type $$Props = ValidationProps;
 	export let tag = "p";
 	const { actions, errors, ids } = getFormField();
+
+	$: internalErrors = getCleansedErrors($errors);
+
 	$: attrs = {
 		"data-fs-validation": "",
-		"data-fs-error": $errors ? "" : undefined,
+		"data-fs-error": internalErrors ? "" : undefined,
 		id: $ids.validation
 	};
 </script>
 
 <svelte:element this={tag} use:actions.validation {...attrs} {...$$restProps}>
-	{#if $errors}
-		{$errors}
+	{#if internalErrors}
+		{internalErrors}
 	{/if}
 </svelte:element>

src/lib/helpers/get-cleansed-errors.ts

@@ -0,0 +1,5 @@
+import type { SuperformsValidationError } from "../internal";
+
+export function getCleansedErrors(errors: SuperformsValidationError): string[] | undefined {
+	return Array.isArray(errors) ? errors : errors?._errors ? errors._errors : undefined;
+}

src/lib/helpers/index.ts

@@ -2,3 +2,4 @@ export * from "./get-form-field.js";
 export * from "./get-form.js";
 export * from "./get-form-schema.js";
 export * from "./get-form-control.js";
+export * from "./get-cleansed-errors.js";

src/lib/internal/form-field/create-field.ts

@@ -5,6 +5,7 @@ import { createFieldActions, createFieldHandlers } from "@/lib/internal/index.js
 import type { ErrorsStore, GetFieldAttrsProps } from "@/lib/internal/index.js";
 import type { CreateFormFieldReturn, FieldAttrStore, FieldContext, FieldIds } from "./types.js";
 import { setContext } from "svelte";
+import { getCleansedErrors } from "@/lib/index.js";
 
 export const FORM_FIELD_CONTEXT = "FormField";
 
@@ -52,7 +53,9 @@ export function createFormField<
 	setContext(FORM_FIELD_CONTEXT, context);
 
 	function getFieldAttrs<T>(props: GetFieldAttrsProps<T>) {
-		const { val, errors, constraints, hasValidation, hasDescription } = props;
+		const { val, errors: rawErrors, constraints, hasValidation, hasDescription } = props;
+		const errors = getCleansedErrors(rawErrors);
+
 		const $ids = get(ids);
 		const describedBy = errors
 			? `${hasValidation ? $ids.validation : ""} ${hasDescription ? $ids.description : ""}`

src/lib/internal/form-field/types.ts

@@ -13,6 +13,8 @@ export type CreateFormFieldReturn = {
 	context: FieldContext;
 };
 
+export type SuperformsValidationError = { _errors?: string[] } | string[] | undefined;
+
 export type FieldContext = {
 	/**
 	 * The name of the field in the form schema.
@@ -32,7 +34,7 @@ export type FieldContext = {
 	 * if they exist, or undefined if they don't. Useful for displaying
 	 * errors in a custom validation message component.
 	 */
-	errors: Writable<string[] | undefined>;
+	errors: Writable<SuperformsValidationError>;
 
 	/**
 	 * A writable store containing the current value of the field.

src/routes/test/a/+page.svelte

@@ -11,14 +11,23 @@
 		}),
 		bio: z.string().max(250, "Bio must be at most 250 characters").optional(),
 		website: z.string().url("Invalid URL").optional(),
-		usage: z.boolean().default(true)
+		usage: z.boolean().default(true),
+		multiSelect: z.array(z.string()).nonempty()
 	});
+
+	const multiSelectItems = [
+		{ label: "First", value: "first" },
+		{ label: "Second", value: "second" },
+		{ label: "Third", value: "third" },
+		{ label: "Fourth", value: "fourth" }
+	];
 </script>
 
 <script lang="ts">
 	import { Form } from "@/lib/index.js";
 	import type { PageData } from "./$types.js";
 	import { Button } from "@/components/ui/button/index.js";
+	import { Select } from "bits-ui";
 
 	export let data: PageData;
 </script>
@@ -103,6 +112,43 @@
 				<Form.Description data-testid="usage-description">usage description</Form.Description>
 			</div>
 		</Form.Field>
+		<Form.Field {config} name="multiSelect" let:setValue let:value>
+			<Form.Label>Multi-select</Form.Label>
+			<Select.Root
+				items={multiSelectItems}
+				let:ids
+				multiple={true}
+				onSelectedChange={(selected) => {
+					setValue(selected?.map((opt) => opt.value));
+				}}
+			>
+				<Select.Input />
+				<Form.Control let:attrs id={ids.trigger}>
+					<Select.Trigger
+						{...attrs}
+						class="flex h-9 w-full items-center justify-between rounded-md border-0 bg-white px-3 py-1.5 text-gray-900 shadow-sm outline-none ring-1 ring-inset ring-gray-300 transition-opacity placeholder:text-gray-400 hover:opacity-90 focus:ring-2 focus:ring-inset focus:ring-violet-600 sm:text-sm sm:leading-6"
+					>
+						<Select.Value placeholder="Select one or more" class="truncate" />
+						&downarrow;
+					</Select.Trigger>
+					<Select.Content
+						class="z-10 flex max-h-72 select-none flex-col overflow-y-auto rounded-md bg-white shadow outline-none focus:ring-2 focus:ring-violet-700"
+					>
+						{#each multiSelectItems as option}
+							<Select.Item
+								value={option.value}
+								label={option.label}
+								class="flex cursor-pointer select-none items-center justify-between px-4 py-1 text-gray-800 outline-none data-[highlighted]:!bg-violet-900 data-[selected]:bg-violet-100 data-[highlighted]:!text-violet-100 data-[selected]:text-violet-900"
+							>
+								{option.label}
+								<Select.ItemIndicator>&check;</Select.ItemIndicator>
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Form.Control>
+			</Select.Root>
+			<Form.Validation class="text-destructive" />
+		</Form.Field>
 		<Button type="submit" data-testid="submit">Submit</Button>
 	</Form.Root>
 </div>