@vuehookform/core 0.1.1 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 vuehookform
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/core/formContext.d.ts

@@ -8,6 +8,14 @@ export interface FieldArrayState {
     items: Ref<FieldArrayItem[]>;
     values: unknown[];
 }
+/**
+ * Cached event handlers for a field to prevent recreation on every render
+ */
+export interface FieldHandlers {
+    onInput: (e: Event) => Promise<void>;
+    onBlur: (e: Event) => Promise<void>;
+    refCallback: (el: unknown) => void;
+}
 /**
  * Shared form context containing all reactive state
  * This is passed to sub-modules via dependency injection
@@ -16,14 +24,15 @@ export interface FormContext<FormValues> {
     formData: Record<string, unknown>;
     defaultValues: Record<string, unknown>;
     errors: ShallowRef<FieldErrors<FormValues>>;
-    touchedFields: Ref<Record<string, boolean>>;
-    dirtyFields: Ref<Record<string, boolean>>;
+    touchedFields: ShallowRef<Record<string, boolean>>;
+    dirtyFields: ShallowRef<Record<string, boolean>>;
     isSubmitting: Ref<boolean>;
     isLoading: Ref<boolean>;
     submitCount: Ref<number>;
     fieldRefs: Map<string, Ref<HTMLInputElement | null>>;
     fieldOptions: Map<string, RegisterOptions>;
     fieldArrays: Map<string, FieldArrayState>;
+    fieldHandlers: Map<string, FieldHandlers>;
     debounceTimers: Map<string, ReturnType<typeof setTimeout>>;
     validationRequestIds: Map<string, number>;
     options: UseFormOptions<ZodType>;

package/dist/utils/paths.d.ts

@@ -2,7 +2,7 @@
  * Get value from object using dot notation path
  * @example get({ user: { name: 'John' } }, 'user.name') => 'John'
  */
-export declare function get(obj: Record<string, unknown>, path: string): unknown;
+export declare function get(obj: unknown, path: string): unknown;
 /**
  * Set value in object using dot notation path
  * @example set({}, 'user.name', 'John') => { user: { name: 'John' } }

package/dist/vuehookform.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let vue = require("vue");
 function get(obj, path) {
-	if (!path) return obj;
+	if (!path || obj === null || obj === void 0) return obj;
 	const keys = path.split(".");
 	let result = obj;
 	for (const key of keys) {
@@ -68,14 +68,15 @@ function createFormContext(options) {
 		formData,
 		defaultValues,
 		errors: (0, vue.shallowRef)({}),
-		touchedFields: (0, vue.ref)({}),
-		dirtyFields: (0, vue.ref)({}),
+		touchedFields: (0, vue.shallowRef)({}),
+		dirtyFields: (0, vue.shallowRef)({}),
 		isSubmitting: (0, vue.ref)(false),
 		isLoading,
 		submitCount: (0, vue.ref)(0),
 		fieldRefs: /* @__PURE__ */ new Map(),
 		fieldOptions: /* @__PURE__ */ new Map(),
 		fieldArrays: /* @__PURE__ */ new Map(),
+		fieldHandlers: /* @__PURE__ */ new Map(),
 		debounceTimers: /* @__PURE__ */ new Map(),
 		validationRequestIds: /* @__PURE__ */ new Map(),
 		options
@@ -100,7 +101,9 @@ function groupErrorsByPath(issues) {
 	return grouped;
 }
 function createFieldError(errors) {
-	if (errors.length === 1) return errors[0].message;
+	const firstError = errors[0];
+	if (!firstError) return "";
+	if (errors.length === 1) return firstError.message;
 	const types = {};
 	for (const err of errors) {
 		const existing = types[err.type];
@@ -108,8 +111,8 @@ function createFieldError(errors) {
 		else types[err.type] = err.message;
 	}
 	return {
-		type: errors[0].type,
-		message: errors[0].message,
+		type: firstError.type,
+		message: firstError.message,
 		types
 	};
 }
@@ -131,7 +134,7 @@ function createValidation(ctx) {
 				ctx.errors.value = clearFieldErrors(ctx.errors.value, fieldPath);
 				return true;
 			}
-			let newErrors$1 = clearFieldErrors(ctx.errors.value, fieldPath);
+			const newErrors$1 = clearFieldErrors(ctx.errors.value, fieldPath);
 			const grouped$1 = groupErrorsByPath(fieldErrors);
 			for (const [path, errors] of grouped$1) set(newErrors$1, path, createFieldError(errors));
 			ctx.errors.value = newErrors$1;
@@ -147,96 +150,112 @@ function createValidation(ctx) {
 }
 function createFieldRegistration(ctx, validate) {
 	function register(name, registerOptions) {
-		const fieldRef = (0, vue.ref)(null);
-		ctx.fieldRefs.set(name, fieldRef);
-		if (registerOptions) ctx.fieldOptions.set(name, registerOptions);
-		if (get(ctx.formData, name) === void 0) {
-			const defaultValue = get(ctx.defaultValues, name);
-			if (defaultValue !== void 0) set(ctx.formData, name, defaultValue);
+		let fieldRef = ctx.fieldRefs.get(name);
+		if (!fieldRef) {
+			fieldRef = (0, vue.ref)(null);
+			ctx.fieldRefs.set(name, fieldRef);
+			if (get(ctx.formData, name) === void 0) {
+				const defaultValue = get(ctx.defaultValues, name);
+				if (defaultValue !== void 0) set(ctx.formData, name, defaultValue);
+			}
 		}
-		const runCustomValidation = async (fieldName, value, requestId) => {
-			const fieldOpts = ctx.fieldOptions.get(fieldName);
-			if (!fieldOpts?.validate || fieldOpts.disabled) return;
-			const error = await fieldOpts.validate(value);
-			if (requestId !== ctx.validationRequestIds.get(fieldName)) return;
-			if (error) ctx.errors.value = {
-				...ctx.errors.value,
-				[fieldName]: error
+		if (registerOptions) ctx.fieldOptions.set(name, registerOptions);
+		let handlers = ctx.fieldHandlers.get(name);
+		if (!handlers) {
+			const runCustomValidation = async (fieldName, value, requestId) => {
+				const fieldOpts = ctx.fieldOptions.get(fieldName);
+				if (!fieldOpts?.validate || fieldOpts.disabled) return;
+				const error = await fieldOpts.validate(value);
+				if (requestId !== ctx.validationRequestIds.get(fieldName)) return;
+				if (error) ctx.errors.value = {
+					...ctx.errors.value,
+					[fieldName]: error
+				};
+				else {
+					const newErrors = { ...ctx.errors.value };
+					delete newErrors[fieldName];
+					ctx.errors.value = newErrors;
+				}
 			};
-			else {
-				const newErrors = { ...ctx.errors.value };
-				delete newErrors[fieldName];
-				ctx.errors.value = newErrors;
-			}
-		};
-		const onInput = async (e) => {
-			const target = e.target;
-			const value = target.type === "checkbox" ? target.checked : target.value;
-			set(ctx.formData, name, value);
-			ctx.dirtyFields.value = {
-				...ctx.dirtyFields.value,
-				[name]: true
+			const onInput = async (e) => {
+				const target = e.target;
+				const value = target.type === "checkbox" ? target.checked : target.value;
+				set(ctx.formData, name, value);
+				ctx.dirtyFields.value = {
+					...ctx.dirtyFields.value,
+					[name]: true
+				};
+				if (ctx.options.mode === "onChange" || ctx.options.mode === "onTouched" && ctx.touchedFields.value[name] || ctx.touchedFields.value[name] && ctx.options.reValidateMode === "onChange") await validate(name);
+				const fieldOpts = ctx.fieldOptions.get(name);
+				if (fieldOpts?.validate && !fieldOpts.disabled) {
+					const requestId = Date.now() + Math.random();
+					ctx.validationRequestIds.set(name, requestId);
+					const debounceMs = fieldOpts.validateDebounce || 0;
+					if (debounceMs > 0) {
+						const existingTimer = ctx.debounceTimers.get(name);
+						if (existingTimer) clearTimeout(existingTimer);
+						const timer = setTimeout(() => {
+							ctx.debounceTimers.delete(name);
+							runCustomValidation(name, value, requestId);
+						}, debounceMs);
+						ctx.debounceTimers.set(name, timer);
+					} else await runCustomValidation(name, value, requestId);
+				}
 			};
-			if (ctx.options.mode === "onChange" || ctx.options.mode === "onTouched" && ctx.touchedFields.value[name] || ctx.touchedFields.value[name] && ctx.options.reValidateMode === "onChange") await validate(name);
-			const fieldOpts = ctx.fieldOptions.get(name);
-			if (fieldOpts?.validate && !fieldOpts.disabled) {
-				const requestId = Date.now() + Math.random();
-				ctx.validationRequestIds.set(name, requestId);
-				const debounceMs = fieldOpts.validateDebounce || 0;
-				if (debounceMs > 0) {
-					const existingTimer = ctx.debounceTimers.get(name);
-					if (existingTimer) clearTimeout(existingTimer);
-					const timer = setTimeout(() => {
-						ctx.debounceTimers.delete(name);
-						runCustomValidation(name, value, requestId);
-					}, debounceMs);
-					ctx.debounceTimers.set(name, timer);
-				} else await runCustomValidation(name, value, requestId);
-			}
-		};
-		const onBlur = async (_e) => {
-			ctx.touchedFields.value = {
-				...ctx.touchedFields.value,
-				[name]: true
+			const onBlur = async (_e) => {
+				ctx.touchedFields.value = {
+					...ctx.touchedFields.value,
+					[name]: true
+				};
+				if (ctx.options.mode === "onBlur" || ctx.options.mode === "onTouched" || ctx.submitCount.value > 0 && ctx.options.reValidateMode === "onBlur") await validate(name);
 			};
-			if (ctx.options.mode === "onBlur" || ctx.options.mode === "onTouched" || ctx.submitCount.value > 0 && ctx.options.reValidateMode === "onBlur") await validate(name);
-		};
-		const refCallback = (el) => {
-			const previousEl = fieldRef.value;
-			fieldRef.value = el;
-			if (el && !registerOptions?.controlled && el instanceof HTMLInputElement) {
-				const value = get(ctx.formData, name);
-				if (value !== void 0) if (el.type === "checkbox") el.checked = value;
-				else el.value = value;
-			}
-			if (previousEl && !el) {
-				if (registerOptions?.shouldUnregister ?? ctx.options.shouldUnregister ?? false) {
-					unset(ctx.formData, name);
-					const newErrors = { ...ctx.errors.value };
-					delete newErrors[name];
-					ctx.errors.value = newErrors;
-					const newTouched = { ...ctx.touchedFields.value };
-					delete newTouched[name];
-					ctx.touchedFields.value = newTouched;
-					const newDirty = { ...ctx.dirtyFields.value };
-					delete newDirty[name];
-					ctx.dirtyFields.value = newDirty;
-					ctx.fieldRefs.delete(name);
-					ctx.fieldOptions.delete(name);
-					const timer = ctx.debounceTimers.get(name);
-					if (timer) {
-						clearTimeout(timer);
-						ctx.debounceTimers.delete(name);
+			const refCallback = (el) => {
+				const currentFieldRef = ctx.fieldRefs.get(name);
+				if (!currentFieldRef) return;
+				const previousEl = currentFieldRef.value;
+				currentFieldRef.value = el;
+				const opts = ctx.fieldOptions.get(name);
+				if (el && !opts?.controlled && el instanceof HTMLInputElement) {
+					const value = get(ctx.formData, name);
+					if (value !== void 0) if (el.type === "checkbox") el.checked = value;
+					else el.value = value;
+				}
+				if (previousEl && !el) {
+					if (opts?.shouldUnregister ?? ctx.options.shouldUnregister ?? false) {
+						unset(ctx.formData, name);
+						const newErrors = { ...ctx.errors.value };
+						delete newErrors[name];
+						ctx.errors.value = newErrors;
+						const newTouched = { ...ctx.touchedFields.value };
+						delete newTouched[name];
+						ctx.touchedFields.value = newTouched;
+						const newDirty = { ...ctx.dirtyFields.value };
+						delete newDirty[name];
+						ctx.dirtyFields.value = newDirty;
+						ctx.fieldRefs.delete(name);
+						ctx.fieldOptions.delete(name);
+						ctx.fieldHandlers.delete(name);
+						const timer = ctx.debounceTimers.get(name);
+						if (timer) {
+							clearTimeout(timer);
+							ctx.debounceTimers.delete(name);
+						}
+						ctx.validationRequestIds.delete(name);
 					}
-					ctx.validationRequestIds.delete(name);
 				}
-			}
-		};
+			};
+			handlers = {
+				onInput,
+				onBlur,
+				refCallback
+			};
+			ctx.fieldHandlers.set(name, handlers);
+		}
 		return {
 			name,
-			ref: refCallback,
-			onInput,
-			onBlur,
+			ref: handlers.refCallback,
+			onInput: handlers.onInput,
+			onBlur: handlers.onBlur,
 			...registerOptions?.controlled && { value: (0, vue.computed)({
 				get: () => get(ctx.formData, name),
 				set: (val) => {
@@ -252,6 +271,7 @@ function createFieldRegistration(ctx, validate) {
 	function unregister(name) {
 		ctx.fieldRefs.delete(name);
 		ctx.fieldOptions.delete(name);
+		ctx.fieldHandlers.delete(name);
 		const timer = ctx.debounceTimers.get(name);
 		if (timer) {
 			clearTimeout(timer);

package/dist/vuehookform.js

@@ -1,6 +1,6 @@
 import { computed, inject, provide, reactive, ref, shallowRef } from "vue";
 function get(obj, path) {
-	if (!path) return obj;
+	if (!path || obj === null || obj === void 0) return obj;
 	const keys = path.split(".");
 	let result = obj;
 	for (const key of keys) {
@@ -67,14 +67,15 @@ function createFormContext(options) {
 		formData,
 		defaultValues,
 		errors: shallowRef({}),
-		touchedFields: ref({}),
-		dirtyFields: ref({}),
+		touchedFields: shallowRef({}),
+		dirtyFields: shallowRef({}),
 		isSubmitting: ref(false),
 		isLoading,
 		submitCount: ref(0),
 		fieldRefs: /* @__PURE__ */ new Map(),
 		fieldOptions: /* @__PURE__ */ new Map(),
 		fieldArrays: /* @__PURE__ */ new Map(),
+		fieldHandlers: /* @__PURE__ */ new Map(),
 		debounceTimers: /* @__PURE__ */ new Map(),
 		validationRequestIds: /* @__PURE__ */ new Map(),
 		options
@@ -99,7 +100,9 @@ function groupErrorsByPath(issues) {
 	return grouped;
 }
 function createFieldError(errors) {
-	if (errors.length === 1) return errors[0].message;
+	const firstError = errors[0];
+	if (!firstError) return "";
+	if (errors.length === 1) return firstError.message;
 	const types = {};
 	for (const err of errors) {
 		const existing = types[err.type];
@@ -107,8 +110,8 @@ function createFieldError(errors) {
 		else types[err.type] = err.message;
 	}
 	return {
-		type: errors[0].type,
-		message: errors[0].message,
+		type: firstError.type,
+		message: firstError.message,
 		types
 	};
 }
@@ -130,7 +133,7 @@ function createValidation(ctx) {
 				ctx.errors.value = clearFieldErrors(ctx.errors.value, fieldPath);
 				return true;
 			}
-			let newErrors$1 = clearFieldErrors(ctx.errors.value, fieldPath);
+			const newErrors$1 = clearFieldErrors(ctx.errors.value, fieldPath);
 			const grouped$1 = groupErrorsByPath(fieldErrors);
 			for (const [path, errors] of grouped$1) set(newErrors$1, path, createFieldError(errors));
 			ctx.errors.value = newErrors$1;
@@ -146,96 +149,112 @@ function createValidation(ctx) {
 }
 function createFieldRegistration(ctx, validate) {
 	function register(name, registerOptions) {
-		const fieldRef = ref(null);
-		ctx.fieldRefs.set(name, fieldRef);
-		if (registerOptions) ctx.fieldOptions.set(name, registerOptions);
-		if (get(ctx.formData, name) === void 0) {
-			const defaultValue = get(ctx.defaultValues, name);
-			if (defaultValue !== void 0) set(ctx.formData, name, defaultValue);
+		let fieldRef = ctx.fieldRefs.get(name);
+		if (!fieldRef) {
+			fieldRef = ref(null);
+			ctx.fieldRefs.set(name, fieldRef);
+			if (get(ctx.formData, name) === void 0) {
+				const defaultValue = get(ctx.defaultValues, name);
+				if (defaultValue !== void 0) set(ctx.formData, name, defaultValue);
+			}
 		}
-		const runCustomValidation = async (fieldName, value, requestId) => {
-			const fieldOpts = ctx.fieldOptions.get(fieldName);
-			if (!fieldOpts?.validate || fieldOpts.disabled) return;
-			const error = await fieldOpts.validate(value);
-			if (requestId !== ctx.validationRequestIds.get(fieldName)) return;
-			if (error) ctx.errors.value = {
-				...ctx.errors.value,
-				[fieldName]: error
+		if (registerOptions) ctx.fieldOptions.set(name, registerOptions);
+		let handlers = ctx.fieldHandlers.get(name);
+		if (!handlers) {
+			const runCustomValidation = async (fieldName, value, requestId) => {
+				const fieldOpts = ctx.fieldOptions.get(fieldName);
+				if (!fieldOpts?.validate || fieldOpts.disabled) return;
+				const error = await fieldOpts.validate(value);
+				if (requestId !== ctx.validationRequestIds.get(fieldName)) return;
+				if (error) ctx.errors.value = {
+					...ctx.errors.value,
+					[fieldName]: error
+				};
+				else {
+					const newErrors = { ...ctx.errors.value };
+					delete newErrors[fieldName];
+					ctx.errors.value = newErrors;
+				}
 			};
-			else {
-				const newErrors = { ...ctx.errors.value };
-				delete newErrors[fieldName];
-				ctx.errors.value = newErrors;
-			}
-		};
-		const onInput = async (e) => {
-			const target = e.target;
-			const value = target.type === "checkbox" ? target.checked : target.value;
-			set(ctx.formData, name, value);
-			ctx.dirtyFields.value = {
-				...ctx.dirtyFields.value,
-				[name]: true
+			const onInput = async (e) => {
+				const target = e.target;
+				const value = target.type === "checkbox" ? target.checked : target.value;
+				set(ctx.formData, name, value);
+				ctx.dirtyFields.value = {
+					...ctx.dirtyFields.value,
+					[name]: true
+				};
+				if (ctx.options.mode === "onChange" || ctx.options.mode === "onTouched" && ctx.touchedFields.value[name] || ctx.touchedFields.value[name] && ctx.options.reValidateMode === "onChange") await validate(name);
+				const fieldOpts = ctx.fieldOptions.get(name);
+				if (fieldOpts?.validate && !fieldOpts.disabled) {
+					const requestId = Date.now() + Math.random();
+					ctx.validationRequestIds.set(name, requestId);
+					const debounceMs = fieldOpts.validateDebounce || 0;
+					if (debounceMs > 0) {
+						const existingTimer = ctx.debounceTimers.get(name);
+						if (existingTimer) clearTimeout(existingTimer);
+						const timer = setTimeout(() => {
+							ctx.debounceTimers.delete(name);
+							runCustomValidation(name, value, requestId);
+						}, debounceMs);
+						ctx.debounceTimers.set(name, timer);
+					} else await runCustomValidation(name, value, requestId);
+				}
 			};
-			if (ctx.options.mode === "onChange" || ctx.options.mode === "onTouched" && ctx.touchedFields.value[name] || ctx.touchedFields.value[name] && ctx.options.reValidateMode === "onChange") await validate(name);
-			const fieldOpts = ctx.fieldOptions.get(name);
-			if (fieldOpts?.validate && !fieldOpts.disabled) {
-				const requestId = Date.now() + Math.random();
-				ctx.validationRequestIds.set(name, requestId);
-				const debounceMs = fieldOpts.validateDebounce || 0;
-				if (debounceMs > 0) {
-					const existingTimer = ctx.debounceTimers.get(name);
-					if (existingTimer) clearTimeout(existingTimer);
-					const timer = setTimeout(() => {
-						ctx.debounceTimers.delete(name);
-						runCustomValidation(name, value, requestId);
-					}, debounceMs);
-					ctx.debounceTimers.set(name, timer);
-				} else await runCustomValidation(name, value, requestId);
-			}
-		};
-		const onBlur = async (_e) => {
-			ctx.touchedFields.value = {
-				...ctx.touchedFields.value,
-				[name]: true
+			const onBlur = async (_e) => {
+				ctx.touchedFields.value = {
+					...ctx.touchedFields.value,
+					[name]: true
+				};
+				if (ctx.options.mode === "onBlur" || ctx.options.mode === "onTouched" || ctx.submitCount.value > 0 && ctx.options.reValidateMode === "onBlur") await validate(name);
 			};
-			if (ctx.options.mode === "onBlur" || ctx.options.mode === "onTouched" || ctx.submitCount.value > 0 && ctx.options.reValidateMode === "onBlur") await validate(name);
-		};
-		const refCallback = (el) => {
-			const previousEl = fieldRef.value;
-			fieldRef.value = el;
-			if (el && !registerOptions?.controlled && el instanceof HTMLInputElement) {
-				const value = get(ctx.formData, name);
-				if (value !== void 0) if (el.type === "checkbox") el.checked = value;
-				else el.value = value;
-			}
-			if (previousEl && !el) {
-				if (registerOptions?.shouldUnregister ?? ctx.options.shouldUnregister ?? false) {
-					unset(ctx.formData, name);
-					const newErrors = { ...ctx.errors.value };
-					delete newErrors[name];
-					ctx.errors.value = newErrors;
-					const newTouched = { ...ctx.touchedFields.value };
-					delete newTouched[name];
-					ctx.touchedFields.value = newTouched;
-					const newDirty = { ...ctx.dirtyFields.value };
-					delete newDirty[name];
-					ctx.dirtyFields.value = newDirty;
-					ctx.fieldRefs.delete(name);
-					ctx.fieldOptions.delete(name);
-					const timer = ctx.debounceTimers.get(name);
-					if (timer) {
-						clearTimeout(timer);
-						ctx.debounceTimers.delete(name);
+			const refCallback = (el) => {
+				const currentFieldRef = ctx.fieldRefs.get(name);
+				if (!currentFieldRef) return;
+				const previousEl = currentFieldRef.value;
+				currentFieldRef.value = el;
+				const opts = ctx.fieldOptions.get(name);
+				if (el && !opts?.controlled && el instanceof HTMLInputElement) {
+					const value = get(ctx.formData, name);
+					if (value !== void 0) if (el.type === "checkbox") el.checked = value;
+					else el.value = value;
+				}
+				if (previousEl && !el) {
+					if (opts?.shouldUnregister ?? ctx.options.shouldUnregister ?? false) {
+						unset(ctx.formData, name);
+						const newErrors = { ...ctx.errors.value };
+						delete newErrors[name];
+						ctx.errors.value = newErrors;
+						const newTouched = { ...ctx.touchedFields.value };
+						delete newTouched[name];
+						ctx.touchedFields.value = newTouched;
+						const newDirty = { ...ctx.dirtyFields.value };
+						delete newDirty[name];
+						ctx.dirtyFields.value = newDirty;
+						ctx.fieldRefs.delete(name);
+						ctx.fieldOptions.delete(name);
+						ctx.fieldHandlers.delete(name);
+						const timer = ctx.debounceTimers.get(name);
+						if (timer) {
+							clearTimeout(timer);
+							ctx.debounceTimers.delete(name);
+						}
+						ctx.validationRequestIds.delete(name);
 					}
-					ctx.validationRequestIds.delete(name);
 				}
-			}
-		};
+			};
+			handlers = {
+				onInput,
+				onBlur,
+				refCallback
+			};
+			ctx.fieldHandlers.set(name, handlers);
+		}
 		return {
 			name,
-			ref: refCallback,
-			onInput,
-			onBlur,
+			ref: handlers.refCallback,
+			onInput: handlers.onInput,
+			onBlur: handlers.onBlur,
 			...registerOptions?.controlled && { value: computed({
 				get: () => get(ctx.formData, name),
 				set: (val) => {
@@ -251,6 +270,7 @@ function createFieldRegistration(ctx, validate) {
 	function unregister(name) {
 		ctx.fieldRefs.delete(name);
 		ctx.fieldOptions.delete(name);
+		ctx.fieldHandlers.delete(name);
 		const timer = ctx.debounceTimers.get(name);
 		if (timer) {
 			clearTimeout(timer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuehookform/core",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "TypeScript-first form library for Vue 3, inspired by React Hook Form. Form-level state management with Zod validation.",
   "type": "module",
   "main": "./dist/vuehookform.cjs",
@@ -50,12 +50,12 @@
     "hook",
     "react-hook-form"
   ],
-  "author": "",
+  "author": "jonnasson",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/vuehookform/core/issues"
   },
-  "homepage": "https://github.com/vuehookform/core#readme",
+  "homepage": "https://vuehookform.com",
   "peerDependencies": {
     "vue": "^3.3.0",
     "zod": "^3.0.0 || ^4.0.0"
@@ -81,6 +81,7 @@
     "prettier": "3.6.2",
     "typescript": "~5.9.0",
     "vite": "npm:rolldown-vite@latest",
+    "vite-plugin-compression2": "^2.4.0",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.16",
     "vue": "^3.5.25",