svelte-simple-form
Version:
A lightweight, **type-safe**, and **reactive** form state management hook for **Svelte 5**, featuring:
41 lines (40 loc) • 1.7 kB
TypeScript
import { z } from 'zod';
type Primitive = string | number | boolean | null | undefined;
type ArrayKey = `${number}`;
type Prev = [never, 0, 1, 2, 3, 4, 5];
type Path<T, D extends number = 5> = [D] extends [never] ? never : T extends Primitive ? '' : {
[K in keyof T]: K extends string ? T[K] extends Array<infer U> ? `${K}` | `${K}.${ArrayKey}` | `${K}.${ArrayKey}.${Path<U, Prev[D]>}` : T[K] extends object ? `${K}` | `${K}.${Path<T[K], Prev[D]>}` : `${K}` : never;
}[keyof T];
type FormProps<T> = {
initialValues: T;
validation?: {
zod?: z.ZodObject<any> | z.ZodEffects<any>;
relatedFields?: Record<string, string[]>;
} | undefined;
onSubmit?: (data: T) => Promise<void>;
onChange?: (field: Path<T>, value: any) => void;
onReset?: () => void;
};
export default function useForm<T>({ initialValues, validation, onSubmit, onChange, onReset }: FormProps<T>): {
form: {
initialValues: T;
data: T;
errors: Record<Path<T>, string[] | undefined>;
isValid: boolean;
isSubmitting: boolean;
isDirty: boolean;
touched: Record<Path<T>, boolean | undefined>;
setInitialValues: (values: T, { reset }?: {
reset?: boolean;
}) => void;
setIsDirty: (dirty?: boolean) => void;
setIsSubmitting: (submitting?: boolean) => void;
reset: () => void;
resetField: (field: Path<T>) => void;
setError: (field: Path<T>, error: string | string[]) => void;
validate: (field?: Path<T> | Path<T>[]) => boolean;
submit: (callback?: (data: T) => any) => Promise<void>;
handler: (node: HTMLFormElement) => void;
};
};
export {};