solid-hook-form 1.9.4 → 2.0.0

package/dist/main.d.ts

@@ -36,12 +36,13 @@ type RegisterReturn<F extends FormValues> = {
     ref(ref: Ref): void;
     onInput(event: Event | unknown): void;
     onChange(event: Event | unknown): void;
+    onBlur(event: FocusEvent | unknown): void;
 };
 type Register<F extends FormValues> = (name: Path<F>, options?: Rules<F, Path<F>>) => RegisterReturn<F>;
 
 type Control<F extends FormValues> = {
     values: Accessor<F>;
-    errors: Accessor<FieldErrors<F>>;
+    errors: FieldErrors<F>;
     register: Register<F>;
 };
 type UseControllerArg<F extends FormValues> = {
@@ -65,37 +66,47 @@ type ControllerProps<F extends FormValues> = {
     render(arg: UseControllerReturn<F>): JSXElement;
 };
 
+type TouchedFields<F extends FormValues = FormValues> = Partial<Record<Path<F>, boolean>>;
+
+type DirtyFields<F extends FormValues = FormValues> = Partial<Record<Path<F>, boolean>>;
+
 type FormValues = Record<string, any>;
 type GetValues<F extends FormValues> = {
     (): F;
     <N extends FieldPath<F>>(name: N): FieldPathValue<F, N>;
 };
 type SetValue<F extends FormValues> = (name: Path<F>, value: FieldPathValue<F, Path<F>>) => void;
-type SubmitCallback<F extends FormValues> = (values: F) => void;
-type OnSubmit<F extends FormValues> = (submit: SubmitCallback<F>) => (event: SubmitEvent) => void;
-type Reset<F extends FormValues> = (newDefaultValues?: Partial<F>) => void;
+type SubmitHandler<F extends FormValues> = (values: F) => void;
+type SubmitErrorHandler<F extends FormValues> = (errors: FieldErrors<F>) => void;
+type HandleSubmit<F extends FormValues> = (onSubmit: SubmitHandler<F>, onError?: SubmitErrorHandler<F>) => (event: SubmitEvent) => void;
+type ResetOptions = {
+    keepTouched?: boolean;
+    keepDirty?: boolean;
+};
+type Reset<F extends FormValues> = (newDefaultValues?: Partial<F>, options?: ResetOptions) => void;
 type CreateFormArg<F extends FormValues> = {
     defaultValues: F;
-    mode?: "onChange" | "onSubmit";
+    mode?: "onChange" | "onSubmit" | "onBlur";
     resolver?: Resolver<F>;
 };
 type CreateFormReturn<F extends FormValues = FormValues> = {
     control: Control<F>;
     formState: {
-        errors: Accessor<FieldErrors<F>>;
+        errors: FieldErrors<F>;
         isValid: Accessor<boolean>;
+        isDirty: Accessor<boolean>;
+        touchedFields: Accessor<TouchedFields<F>>;
+        dirtyFields: Accessor<DirtyFields<F>>;
     };
     values: Accessor<F>;
-    errors: Accessor<FieldErrors<F>>;
-    isValid: Accessor<boolean>;
+    errors: FieldErrors<F>;
     register: Register<F>;
     getValues: GetValues<F>;
     setValue: SetValue<F>;
-    onSubmit: OnSubmit<F>;
-    handleSubmit: OnSubmit<F>;
+    handleSubmit: HandleSubmit<F>;
     reset: Reset<F>;
 };
-type CreateForm = <F extends FormValues>(arg?: CreateFormArg<F>) => CreateFormReturn<F>;
+type CreateForm = <F extends FormValues>(arg: CreateFormArg<F>) => CreateFormReturn<F>;
 
 declare const createForm: CreateForm;
 
@@ -114,4 +125,4 @@ declare const get: (object: any, path: string, defaultValue?: unknown) => any;
 
 declare const set: (object: FormValues, path: string, value: unknown) => void;
 
-export { type Control, Controller, type CreateFormArg, type CreateFormReturn, type FieldError, type FieldErrors, FormProvider, type FormValues, type Rules, type UseControllerArg, type UseControllerReturn, createForm, get, set, useController, createForm as useForm, useFormContext };
+export { type Control, Controller, type CreateFormArg, type CreateFormReturn, type FieldError, type FieldErrors, FormProvider, type FormValues, type Rules, type SubmitErrorHandler, type SubmitHandler, type UseControllerArg, type UseControllerReturn, createForm, get, set, useController, useFormContext };

package/dist/main.js

@@ -1,4 +1,5 @@
 import { createContext, createSignal, createMemo, useContext } from 'solid-js';
+import { createStore, reconcile, produce } from 'solid-js/store';
 import { memo, createComponent } from 'solid-js/web';
 
 // src/create_form.ts
@@ -24,6 +25,12 @@ var getFieldValue = (event) => {
 
 // src/logic/set_value.ts
 var setFieldValue = (field, value) => {
+  if (!field) {
+    return;
+  }
+  if (value === void 0) {
+    return;
+  }
   if (field instanceof HTMLSelectElement) {
     field.value = value;
     return;
@@ -106,25 +113,26 @@ var validate = (values, name, rules = {}) => {
   }
 };
 var createErrors = () => {
-  const [errors, setErrors] = createSignal({});
+  const [errors, setErrors] = createStore({});
   const getError = (name) => {
-    return get(errors(), name);
+    return errors[name];
   };
   const appendError = (name, error) => {
-    setErrors((prev) => {
-      const newState = { ...prev, [name]: error };
-      return newState;
-    });
+    setErrors(
+      produce((prevState) => {
+        prevState[name] = error;
+      })
+    );
   };
   const removeError = (name) => {
-    setErrors((prev) => {
-      const newState = { ...prev };
-      delete newState[name];
-      return newState;
-    });
+    setErrors(
+      produce((prevState) => {
+        delete prevState[name];
+      })
+    );
   };
   const resetErrors = () => {
-    setErrors({});
+    setErrors(reconcile({}));
   };
   return {
     errors,
@@ -213,16 +221,65 @@ var getResolverFields = (fields) => {
     return acc;
   }, {});
 };
+var createTouchedFields = () => {
+  const [touchedFields, setTouchedFields] = createSignal({});
+  const addTouched = (name) => {
+    setTouchedFields((prev) => {
+      const newState = { ...prev };
+      set(newState, name, true);
+      return newState;
+    });
+  };
+  const resetTouched = (keepTouched) => {
+    if (keepTouched) {
+      return;
+    }
+    setTouchedFields({});
+  };
+  return { touchedFields, addTouched, resetTouched };
+};
+var isSomeFieldDirty = (value) => {
+  return Object.values(value).some((value2) => {
+    if (typeof value2 === "object") {
+      return isSomeFieldDirty(value2);
+    }
+    return value2;
+  });
+};
+var createDirtyFields = (defaultValues) => {
+  const [dirtyFields, setDirtyFields] = createSignal({});
+  const isDirty = createMemo(() => {
+    return isSomeFieldDirty(dirtyFields());
+  });
+  const checkDirty = (name, value) => {
+    const defaultValue = get(defaultValues, name);
+    const isDirty2 = value !== defaultValue;
+    setDirtyFields((prev) => {
+      const newState = { ...prev };
+      set(newState, name, isDirty2);
+      return newState;
+    });
+  };
+  const resetDirty = (keepDirty) => {
+    if (keepDirty) {
+      return;
+    }
+    setDirtyFields({});
+  };
+  return { dirtyFields, isDirty, checkDirty, resetDirty };
+};
 
 // src/create_form.ts
-var createForm = (arg = { defaultValues: {} }) => {
+var createForm = (arg) => {
   const { defaultValues, mode = "onChange", resolver } = arg;
   const { fields, getField, setField } = createFields();
   const { rules, addRule, getRule } = createRules();
-  const [values, setValues] = createSignal(defaultValues);
+  const [values, setValues] = createSignal(structuredClone(defaultValues));
   const { errors, appendError, removeError, resetErrors, getError } = createErrors();
+  const { touchedFields, addTouched, resetTouched } = createTouchedFields();
+  const { dirtyFields, isDirty, checkDirty, resetDirty } = createDirtyFields(defaultValues);
   const isValid = createMemo(() => {
-    return !Object.keys(errors()).length;
+    return !Object.keys(errors).length;
   });
   const setFieldError = (name, error) => {
     const field = getField(name);
@@ -238,7 +295,7 @@ var createForm = (arg = { defaultValues: {} }) => {
     if (!resolver) {
       return;
     }
-    const result = await resolver(values(), null, {
+    const result = await resolver(values() || {}, null, {
       fields: getResolverFields(fields),
       shouldUseNativeValidation: false
     });
@@ -284,13 +341,15 @@ var createForm = (arg = { defaultValues: {} }) => {
     }
   };
   const onFieldChange = (event, name) => {
-    const value = formatValue(getFieldValue(event), rules[name]);
+    const fieldValue = getFieldValue(event);
+    const value = formatValue(fieldValue, rules[name]);
     setValues((prev) => {
       const newState = { ...prev };
       set(newState, name, value);
       return newState;
     });
     validateField(name);
+    checkDirty(name, value);
   };
   const register = (name, options = {}) => {
     addRule(name, options);
@@ -306,15 +365,19 @@ var createForm = (arg = { defaultValues: {} }) => {
           onFieldChange(event, name);
         }
       },
+      onBlur(event) {
+        if (mode === "onBlur") {
+          onFieldChange(event, name);
+        }
+        addTouched(name);
+      },
       ref(element) {
         const field = getField(name);
         if (field) {
           return;
         }
         setField(name, element);
-        if (element) {
-          setFieldValue(element, get(values(), name));
-        }
+        setFieldValue(element, get(values(), name));
       }
     };
   };
@@ -336,47 +399,45 @@ var createForm = (arg = { defaultValues: {} }) => {
       return newValues;
     });
     const field = getField(name);
-    if (field) {
-      setFieldValue(field, value);
-    }
+    setFieldValue(field, value);
   };
-  const onSubmit = (submit) => {
+  const handleSubmit = (onSubmit, onError) => {
     return async (event) => {
       event.preventDefault();
       await validateAllFields();
       if (isValid()) {
-        submit(getValues());
+        onSubmit(getValues());
+        return;
       }
+      onError?.(errors);
       focusFirstError();
     };
   };
-  const reset = (newDefaultValues = {}) => {
-    const newValues = {
-      ...structuredClone(defaultValues),
-      ...newDefaultValues
-    };
+  const reset = (values2, options = {}) => {
+    const newValues = values2 ? values2 : structuredClone(defaultValues);
     setValues(() => newValues);
     resetErrors();
+    resetTouched(options.keepTouched);
+    resetDirty(options.keepDirty);
     Object.entries(fields).forEach(([name, field]) => {
-      if (field) {
-        setFieldValue(field, get(newValues, name));
-      }
+      setFieldValue(field, get(newValues, name));
     });
   };
   return {
     control,
     formState: {
       errors,
-      isValid
+      isValid,
+      isDirty,
+      touchedFields,
+      dirtyFields
     },
     values,
     errors,
-    isValid,
     register,
     getValues,
     setValue,
-    onSubmit,
-    handleSubmit: onSubmit,
+    handleSubmit,
     reset
   };
 };
@@ -397,12 +458,12 @@ var useController = (arg) => {
     return get(control.values(), arg.name);
   });
   const error = createMemo(() => {
-    return control.errors()[arg.name];
+    return control.errors[arg.name];
   });
   return {
     field: {
-      value,
-      ...fieldProps
+      ...fieldProps,
+      value
     },
     fieldState: {
       error
@@ -424,4 +485,4 @@ var FormProvider = (props) => {
   });
 };
 
-export { Controller, FormProvider, createForm, get, set, useController, createForm as useForm, useFormContext };
+export { Controller, FormProvider, createForm, get, set, useController, useFormContext };

package/dist/main.jsx

@@ -1,5 +1,5 @@
 // src/create_form.ts
-import { createMemo, createSignal as createSignal2 } from "solid-js";
+import { createMemo as createMemo2, createSignal as createSignal3 } from "solid-js";
 
 // src/logic/get_value.ts
 var getFieldValue = (event) => {
@@ -22,6 +22,12 @@ var getFieldValue = (event) => {
 
 // src/logic/set_value.ts
 var setFieldValue = (field, value) => {
+  if (!field) {
+    return;
+  }
+  if (value === void 0) {
+    return;
+  }
   if (field instanceof HTMLSelectElement) {
     field.value = value;
     return;
@@ -105,27 +111,28 @@ var validate = (values, name, rules = {}) => {
 };
 
 // src/logic/create_errors.ts
-import { createSignal } from "solid-js";
+import { createStore, reconcile, produce } from "solid-js/store";
 var createErrors = () => {
-  const [errors, setErrors] = createSignal({});
+  const [errors, setErrors] = createStore({});
   const getError = (name) => {
-    return get(errors(), name);
+    return errors[name];
   };
   const appendError = (name, error) => {
-    setErrors((prev) => {
-      const newState = { ...prev, [name]: error };
-      return newState;
-    });
+    setErrors(
+      produce((prevState) => {
+        prevState[name] = error;
+      })
+    );
   };
   const removeError = (name) => {
-    setErrors((prev) => {
-      const newState = { ...prev };
-      delete newState[name];
-      return newState;
-    });
+    setErrors(
+      produce((prevState) => {
+        delete prevState[name];
+      })
+    );
   };
   const resetErrors = () => {
-    setErrors({});
+    setErrors(reconcile({}));
   };
   return {
     errors,
@@ -215,15 +222,70 @@ var getResolverFields = (fields) => {
   }, {});
 };
 
+// src/logic/create_touched_fields.ts
+import { createSignal } from "solid-js";
+var createTouchedFields = () => {
+  const [touchedFields, setTouchedFields] = createSignal({});
+  const addTouched = (name) => {
+    setTouchedFields((prev) => {
+      const newState = { ...prev };
+      set(newState, name, true);
+      return newState;
+    });
+  };
+  const resetTouched = (keepTouched) => {
+    if (keepTouched) {
+      return;
+    }
+    setTouchedFields({});
+  };
+  return { touchedFields, addTouched, resetTouched };
+};
+
+// src/logic/create_dirty_fields.ts
+import { createMemo, createSignal as createSignal2 } from "solid-js";
+var isSomeFieldDirty = (value) => {
+  return Object.values(value).some((value2) => {
+    if (typeof value2 === "object") {
+      return isSomeFieldDirty(value2);
+    }
+    return value2;
+  });
+};
+var createDirtyFields = (defaultValues) => {
+  const [dirtyFields, setDirtyFields] = createSignal2({});
+  const isDirty = createMemo(() => {
+    return isSomeFieldDirty(dirtyFields());
+  });
+  const checkDirty = (name, value) => {
+    const defaultValue = get(defaultValues, name);
+    const isDirty2 = value !== defaultValue;
+    setDirtyFields((prev) => {
+      const newState = { ...prev };
+      set(newState, name, isDirty2);
+      return newState;
+    });
+  };
+  const resetDirty = (keepDirty) => {
+    if (keepDirty) {
+      return;
+    }
+    setDirtyFields({});
+  };
+  return { dirtyFields, isDirty, checkDirty, resetDirty };
+};
+
 // src/create_form.ts
-var createForm = (arg = { defaultValues: {} }) => {
+var createForm = (arg) => {
   const { defaultValues, mode = "onChange", resolver } = arg;
   const { fields, getField, setField } = createFields();
   const { rules, addRule, getRule } = createRules();
-  const [values, setValues] = createSignal2(defaultValues);
+  const [values, setValues] = createSignal3(structuredClone(defaultValues));
   const { errors, appendError, removeError, resetErrors, getError } = createErrors();
-  const isValid = createMemo(() => {
-    return !Object.keys(errors()).length;
+  const { touchedFields, addTouched, resetTouched } = createTouchedFields();
+  const { dirtyFields, isDirty, checkDirty, resetDirty } = createDirtyFields(defaultValues);
+  const isValid = createMemo2(() => {
+    return !Object.keys(errors).length;
   });
   const setFieldError = (name, error) => {
     const field = getField(name);
@@ -239,7 +301,7 @@ var createForm = (arg = { defaultValues: {} }) => {
     if (!resolver) {
       return;
     }
-    const result = await resolver(values(), null, {
+    const result = await resolver(values() || {}, null, {
       fields: getResolverFields(fields),
       shouldUseNativeValidation: false
     });
@@ -285,13 +347,15 @@ var createForm = (arg = { defaultValues: {} }) => {
     }
   };
   const onFieldChange = (event, name) => {
-    const value = formatValue(getFieldValue(event), rules[name]);
+    const fieldValue = getFieldValue(event);
+    const value = formatValue(fieldValue, rules[name]);
     setValues((prev) => {
       const newState = { ...prev };
       set(newState, name, value);
       return newState;
     });
     validateField(name);
+    checkDirty(name, value);
   };
   const register = (name, options = {}) => {
     addRule(name, options);
@@ -307,15 +371,19 @@ var createForm = (arg = { defaultValues: {} }) => {
           onFieldChange(event, name);
         }
       },
+      onBlur(event) {
+        if (mode === "onBlur") {
+          onFieldChange(event, name);
+        }
+        addTouched(name);
+      },
       ref(element) {
         const field = getField(name);
         if (field) {
           return;
         }
         setField(name, element);
-        if (element) {
-          setFieldValue(element, get(values(), name));
-        }
+        setFieldValue(element, get(values(), name));
       }
     };
   };
@@ -337,53 +405,51 @@ var createForm = (arg = { defaultValues: {} }) => {
       return newValues;
     });
     const field = getField(name);
-    if (field) {
-      setFieldValue(field, value);
-    }
+    setFieldValue(field, value);
   };
-  const onSubmit = (submit) => {
+  const handleSubmit = (onSubmit, onError) => {
     return async (event) => {
       event.preventDefault();
       await validateAllFields();
       if (isValid()) {
-        submit(getValues());
+        onSubmit(getValues());
+        return;
       }
+      onError?.(errors);
       focusFirstError();
     };
   };
-  const reset = (newDefaultValues = {}) => {
-    const newValues = {
-      ...structuredClone(defaultValues),
-      ...newDefaultValues
-    };
+  const reset = (values2, options = {}) => {
+    const newValues = values2 ? values2 : structuredClone(defaultValues);
     setValues(() => newValues);
     resetErrors();
+    resetTouched(options.keepTouched);
+    resetDirty(options.keepDirty);
     Object.entries(fields).forEach(([name, field]) => {
-      if (field) {
-        setFieldValue(field, get(newValues, name));
-      }
+      setFieldValue(field, get(newValues, name));
     });
   };
   return {
     control,
     formState: {
       errors,
-      isValid
+      isValid,
+      isDirty,
+      touchedFields,
+      dirtyFields
     },
     values,
     errors,
-    isValid,
     register,
     getValues,
     setValue,
-    onSubmit,
-    handleSubmit: onSubmit,
+    handleSubmit,
     reset
   };
 };
 
 // src/use_controller.ts
-import { createMemo as createMemo2 } from "solid-js";
+import { createMemo as createMemo3 } from "solid-js";
 
 // src/use_form_context.ts
 import { useContext } from "solid-js";
@@ -403,16 +469,16 @@ var useController = (arg) => {
   const form = useFormContext();
   const control = form?.control || arg.control;
   const fieldProps = control.register(arg.name, arg.rules);
-  const value = createMemo2(() => {
+  const value = createMemo3(() => {
     return get(control.values(), arg.name);
   });
-  const error = createMemo2(() => {
-    return control.errors()[arg.name];
+  const error = createMemo3(() => {
+    return control.errors[arg.name];
   });
   return {
     field: {
-      value,
-      ...fieldProps
+      ...fieldProps,
+      value
     },
     fieldState: {
       error
@@ -437,6 +503,5 @@ export {
   get,
   set,
   useController,
-  createForm as useForm,
   useFormContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-hook-form",
-  "version": "1.9.4",
+  "version": "2.0.0",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",
@@ -26,10 +26,7 @@
     "typescript": "~5.7.2"
   },
   "scripts": {
-    "preinstall": "cd ./tests && npm ci",
-    "build": "tsc && tsup",
-    "test": "cd ./tests && npm run test",
-    "test:ui": "cd ./tests && npm run test:ui"
+    "build": "tsc && tsup"
   },
   "author": "thorn_pear",
   "license": "ISC",