@formisch/react 0.2.2 → 0.4.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as v from "valibot";
-import { ChangeEventHandler, FocusEventHandler, FormHTMLAttributes, ReactElement } from "react";
+import { ChangeEventHandler, FocusEventHandler, FormEvent, FormHTMLAttributes, ReactElement } from "react";
 
-//#region ../../packages/core/dist/index.vanilla.d.ts
+//#region ../../packages/core/dist/index.react.d.ts
 
 //#region src/types/schema.d.ts
 /**
@@ -184,12 +184,6 @@ interface InternalValueStore extends InternalBaseStore {
 */
 type InternalFieldStore = InternalArrayStore | InternalObjectStore | InternalValueStore;
 //#endregion
-//#region src/values.d.ts
-/**
-* Internal symbol constant.
-*/
-declare const INTERNAL: "~internal";
-//#endregion
 //#region src/types/utils.d.ts
 /**
 * Checks if a type is `any`.
@@ -212,6 +206,12 @@ type DeepPartial<TValue> = TValue extends readonly unknown[] ? number extends TV
 */
 type PartialValues<TValue> = TValue extends readonly unknown[] ? number extends TValue["length"] ? TValue : { [Key in keyof TValue]: PartialValues<TValue[Key]> } : TValue extends Record<PropertyKey, unknown> ? { [Key in keyof TValue]: PartialValues<TValue[Key]> } : TValue | undefined;
 //#endregion
+//#region src/values.d.ts
+/**
+* Internal symbol constant.
+*/
+declare const INTERNAL: "~internal";
+//#endregion
 //#region src/types/form.d.ts
 /**
 * Validation mode type.
@@ -286,10 +286,16 @@ interface BaseFormStore<TSchema extends Schema = Schema> {
   */
   readonly [INTERNAL]: InternalFormStore<TSchema>;
 }
+//#endregion
+//#region src/types/form.react.d.ts
 /**
 * Submit handler type.
 */
-type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<unknown>;
+type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>) => MaybePromise<unknown>;
+/**
+* Submit event handler type.
+*/
+type SubmitEventHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: FormEvent<HTMLFormElement>) => MaybePromise<unknown>;
 //#endregion
 //#region src/types/path.d.ts
 /**
@@ -358,9 +364,8 @@ type ValidArrayPath<TValue, TPath extends RequiredPath> = TPath extends LazyArra
 * @param toInternalFieldStore The destination field store to copy to.
 */
 //#endregion
-//#region ../../packages/methods/dist/index.vanilla.d.ts
+//#region ../../packages/methods/dist/index.react.d.ts
 //#region src/focus/focus.d.ts
-
 /**
 * Focus field config interface.
 */
@@ -472,7 +477,18 @@ declare function getInput<TSchema extends Schema>(form: BaseFormStore<TSchema>):
 */
 declare function getInput<TSchema extends Schema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldInputConfig<TSchema, TFieldPath> : GetFormInputConfig): PartialValues<TFieldPath extends RequiredPath ? PathValue<v.InferInput<TSchema>, TFieldPath> : v.InferInput<TSchema>>;
 //#endregion
-//#region src/handleSubmit/handleSubmit.d.ts
+//#region src/handleSubmit/handleSubmit.react.d.ts
+/**
+* Creates a submit event handler for the form that validates the form input,
+* and calls the provided handler if validation succeeds. This is designed to
+* be used with the form's onsubmit event.
+*
+* @param form The form store to handle submission for.
+* @param handler The submit handler function called with validated output if validation succeeds.
+*
+* @returns A submit event handler function to attach to the form element.
+*/
+declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitHandler<TSchema>): () => Promise<void>;
 /**
 * Creates a submit event handler for the form that prevents default browser
 * submission, validates the form input, and calls the provided handler if
@@ -483,7 +499,7 @@ declare function getInput<TSchema extends Schema, TFieldPath extends RequiredPat
 *
 * @returns A submit event handler function to attach to the form element.
 */
-declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitHandler<TSchema>): (event: SubmitEvent) => Promise<void>;
+declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitEventHandler<TSchema>): (event: FormEvent<HTMLFormElement>) => Promise<void>;
 //#endregion
 //#region src/insert/insert.d.ts
 /**
@@ -720,10 +736,12 @@ interface SetFieldInputConfig<TSchema extends Schema, TFieldPath extends Require
   */
   readonly input: PathValue<v.InferInput<TSchema>, TFieldPath>;
 }
+//#endregion
+//#region src/setInput/setInput.react.d.ts
 /**
 * Sets the input value of a specific field or the entire form. This updates
 * the field value(s) and triggers validation if required by the form's
-* validation mode.
+* validation mode for both input and change events.
 *
 * @param form The form store to set input on.
 * @param config The set form input configuration specifying the new input values.
@@ -732,7 +750,7 @@ declare function setInput<TSchema extends Schema>(form: BaseFormStore<TSchema>,
 /**
 * Sets the input value of a specific field or the entire form. This updates
 * the field value(s) and triggers validation if required by the form's
-* validation mode.
+* validation mode for both input and change events.
 *
 * @param form The form store to set input on.
 * @param config The set input configuration specifying the path and new value.
@@ -856,6 +874,10 @@ interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends Require
   */
   readonly isValid: boolean;
   /**
+  * Sets the field input value programmatically.
+  */
+  readonly onChange: (value: PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>) => void;
+  /**
   * The props to spread onto the field element for integration.
   */
   readonly props: FieldElementProps;
@@ -1007,7 +1029,7 @@ type FormProps<TSchema extends Schema = Schema> = Omit<FormHTMLAttributes<HTMLFo
   /**
   * The submit handler called when the form is submitted and validation succeeds.
   */
-  readonly onSubmit: SubmitHandler<TSchema>;
+  readonly onSubmit: SubmitHandler<TSchema> | SubmitEventHandler<TSchema>;
 };
 /**
 * Form component that manages form submission and applies internal state.
@@ -1070,4 +1092,4 @@ declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends R
 */
 declare function useForm<TSchema extends Schema>(config: FormConfig<TSchema>): FormStore<TSchema>;
 //#endregion
-export { type DeepPartial, Field, FieldArray, FieldArrayProps, FieldArrayStore, type FieldElement, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, type FormConfig, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, type PartialValues, type PathValue, RemoveConfig, ReplaceConfig, type RequiredPath, ResetFieldConfig, ResetFormConfig, type Schema, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, type ValidArrayPath, type ValidPath, ValidateFormConfig, type ValidationMode, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm, validate };
+export { type DeepPartial, Field, FieldArray, FieldArrayProps, FieldArrayStore, type FieldElement, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, type FormConfig, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, type PartialValues, type PathValue, RemoveConfig, ReplaceConfig, type RequiredPath, ResetFieldConfig, ResetFormConfig, type Schema, SetFieldErrorsConfig, type SetFieldInputConfig, SetFormErrorsConfig, type SetFormInputConfig, type SubmitEventHandler, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, type ValidArrayPath, type ValidPath, ValidateFormConfig, type ValidationMode, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm, validate };

package/dist/index.js

@@ -2,11 +2,11 @@ import * as v from "valibot";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region ../../packages/core/dist/index.vanilla.js
+//#region ../../packages/core/dist/index.react.js
 /**
 * The current framework being used.
 */
-const framework = "vanilla";
+const framework = "react";
 /**
 * Creates a unique identifier string.
 *
@@ -141,7 +141,7 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path, nu
 						initializeFieldStore(internalFieldStore.children[index], schema.item, initialInput[index], path);
 						path.pop();
 					}
-				} else for (let index = 0; index < schema.items; index++) {
+				} else for (let index = 0; index < schema.items.length; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
 					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput?.[index], path);
@@ -454,7 +454,7 @@ function setNestedInput(internalFieldStore, input) {
 		}
 		for (let index = 0; index < arrayInput.length; index++) setNestedInput(internalFieldStore.children[index], arrayInput[index]);
 		internalFieldStore.input.value = input == null ? input : true;
-		internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value || internalFieldStore.startItems.value.length !== items.length;
+		internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value || internalFieldStore.startItems.value.length !== internalFieldStore.items.value.length;
 	} else if (internalFieldStore.kind === "object") {
 		for (const key in internalFieldStore.children) setNestedInput(internalFieldStore.children[key], input?.[key]);
 		internalFieldStore.input.value = input == null ? input : true;
@@ -619,7 +619,7 @@ function validateIfRequired(internalFormStore, internalFieldStore, validationMod
 const INTERNAL = "~internal";
 
 //#endregion
-//#region ../../packages/methods/dist/index.vanilla.js
+//#region ../../packages/methods/dist/index.react.js
 /**
 * Focuses the first input element of a field. This is useful for
 * programmatically setting focus to a specific field, such as after
@@ -659,9 +659,9 @@ function getInput(form, config) {
 	return getFieldInput(config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]);
 }
 /* @__NO_SIDE_EFFECTS__ */
-function handleSubmit(form, handler) {
+function handleSubmit$1(form, handler) {
 	return async (event) => {
-		event.preventDefault();
+		event?.preventDefault();
 		const internalFormStore = form[INTERNAL];
 		internalFormStore.isSubmitted.value = true;
 		internalFormStore.isSubmitting.value = true;
@@ -675,6 +675,10 @@ function handleSubmit(form, handler) {
 		}
 	};
 }
+/* @__NO_SIDE_EFFECTS__ */
+function handleSubmit(form, handler) {
+	return /* @__PURE__ */ handleSubmit$1(form, handler);
+}
 /**
 * Inserts a new item into a field array at the specified index. All items at
 * or after the insertion point are shifted up by one index.
@@ -814,7 +818,9 @@ function setInput(form, config) {
 	batch(() => {
 		const internalFormStore = form[INTERNAL];
 		setFieldInput(internalFormStore, config.path ?? [], config.input);
-		validateIfRequired(internalFormStore, config.path ? getFieldStore(internalFormStore, config.path) : internalFormStore, "input");
+		const fieldOrFormStore = config.path ? getFieldStore(internalFormStore, config.path) : internalFormStore;
+		validateIfRequired(internalFormStore, fieldOrFormStore, "input");
+		validateIfRequired(internalFormStore, fieldOrFormStore, "change");
 	});
 }
 /**
@@ -917,6 +923,11 @@ function useField(form, config) {
 		get isValid() {
 			return !getFieldBool(internalFieldStore, "errors");
 		},
+		onChange(value) {
+			setFieldInput(internalFormStore, config.path, value);
+			validateIfRequired(internalFormStore, internalFieldStore, "input");
+			validateIfRequired(internalFormStore, internalFieldStore, "change");
+		},
 		props: {
 			name: internalFieldStore.name,
 			autoFocus: !!internalFieldStore.errors.value,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/react",
   "description": "The modular and type-safe form library for React",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -33,7 +33,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
@@ -46,10 +45,10 @@
     "react-dom": "^19.2.1",
     "tsdown": "^0.16.8",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
-    "@formisch/core": "0.4.5",
-    "@formisch/methods": "0.5.2"
+    "@formisch/core": "0.6.0",
+    "@formisch/methods": "0.7.0",
+    "@formisch/eslint-config": "0.1.0"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",