solid-hook-form 1.10.0 → 2.0.1

package/dist/main.d.ts

@@ -42,14 +42,13 @@ type Register<F extends FormValues> = (name: Path<F>, options?: Rules<F, Path<F>
 
 type Control<F extends FormValues> = {
     values: Accessor<F>;
-    errors: Accessor<FieldErrors<F>>;
+    errors: FieldErrors<F>;
     register: Register<F>;
 };
 type UseControllerArg<F extends FormValues> = {
-    control: Control<F>;
+    control?: Control<F>;
     name: Path<F>;
     rules?: Rules<F>;
-    render(arg: UseControllerReturn<F>): JSXElement;
 };
 type UseControllerReturn<F extends FormValues> = {
     field: RegisterReturn<F> & {
@@ -60,7 +59,7 @@ type UseControllerReturn<F extends FormValues> = {
     };
 };
 type ControllerProps<F extends FormValues> = {
-    control: Control<F>;
+    control?: Control<F>;
     name: Path<F>;
     rules?: Rules<F>;
     render(arg: UseControllerReturn<F>): JSXElement;
@@ -68,6 +67,8 @@ type ControllerProps<F extends FormValues> = {
 
 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;
@@ -79,6 +80,7 @@ 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> = {
@@ -89,21 +91,21 @@ type CreateFormArg<F extends FormValues> = {
 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: HandleSubmit<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;
 
@@ -122,4 +124,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 SubmitErrorHandler, type SubmitHandler, 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,7 +221,7 @@ var getResolverFields = (fields) => {
     return acc;
   }, {});
 };
-var createTouched = () => {
+var createTouchedFields = () => {
   const [touchedFields, setTouchedFields] = createSignal({});
   const addTouched = (name) => {
     setTouchedFields((prev) => {
@@ -230,17 +238,48 @@ var createTouched = () => {
   };
   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 } = createTouched();
+  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);
@@ -256,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
     });
@@ -302,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);
@@ -336,9 +377,7 @@ var createForm = (arg = { defaultValues: {} }) => {
           return;
         }
         setField(name, element);
-        if (element) {
-          setFieldValue(element, get(values(), name));
-        }
+        setFieldValue(element, get(values(), name));
       }
     };
   };
@@ -360,9 +399,7 @@ var createForm = (arg = { defaultValues: {} }) => {
       return newValues;
     });
     const field = getField(name);
-    if (field) {
-      setFieldValue(field, value);
-    }
+    setFieldValue(field, value);
   };
   const handleSubmit = (onSubmit, onError) => {
     return async (event) => {
@@ -372,22 +409,18 @@ var createForm = (arg = { defaultValues: {} }) => {
         onSubmit(getValues());
         return;
       }
-      onError?.(errors());
+      onError?.(errors);
       focusFirstError();
     };
   };
-  const reset = (newDefaultValues = {}, options = {}) => {
-    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 {
@@ -395,15 +428,15 @@ var createForm = (arg = { defaultValues: {} }) => {
     formState: {
       errors,
       isValid,
-      touchedFields
+      isDirty,
+      touchedFields,
+      dirtyFields
     },
     values,
     errors,
-    isValid,
     register,
     getValues,
     setValue,
-    onSubmit: handleSubmit,
     handleSubmit,
     reset
   };
@@ -425,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
@@ -452,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 createSignal3 } 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,10 +222,10 @@ var getResolverFields = (fields) => {
   }, {});
 };
 
-// src/logic/create_touched.ts
-import { createSignal as createSignal2 } from "solid-js";
-var createTouched = () => {
-  const [touchedFields, setTouchedFields] = createSignal2({});
+// 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 };
@@ -235,16 +242,50 @@ var createTouched = () => {
   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] = createSignal3(defaultValues);
+  const [values, setValues] = createSignal3(structuredClone(defaultValues));
   const { errors, appendError, removeError, resetErrors, getError } = createErrors();
-  const { touchedFields, addTouched, resetTouched } = createTouched();
-  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);
@@ -260,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
     });
@@ -306,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);
@@ -340,9 +383,7 @@ var createForm = (arg = { defaultValues: {} }) => {
           return;
         }
         setField(name, element);
-        if (element) {
-          setFieldValue(element, get(values(), name));
-        }
+        setFieldValue(element, get(values(), name));
       }
     };
   };
@@ -364,9 +405,7 @@ var createForm = (arg = { defaultValues: {} }) => {
       return newValues;
     });
     const field = getField(name);
-    if (field) {
-      setFieldValue(field, value);
-    }
+    setFieldValue(field, value);
   };
   const handleSubmit = (onSubmit, onError) => {
     return async (event) => {
@@ -376,22 +415,18 @@ var createForm = (arg = { defaultValues: {} }) => {
         onSubmit(getValues());
         return;
       }
-      onError?.(errors());
+      onError?.(errors);
       focusFirstError();
     };
   };
-  const reset = (newDefaultValues = {}, options = {}) => {
-    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 {
@@ -399,22 +434,22 @@ var createForm = (arg = { defaultValues: {} }) => {
     formState: {
       errors,
       isValid,
-      touchedFields
+      isDirty,
+      touchedFields,
+      dirtyFields
     },
     values,
     errors,
-    isValid,
     register,
     getValues,
     setValue,
-    onSubmit: handleSubmit,
     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";
@@ -434,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
@@ -468,6 +503,5 @@ export {
   get,
   set,
   useController,
-  createForm as useForm,
   useFormContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-hook-form",
-  "version": "1.10.0",
+  "version": "2.0.1",
   "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",