mobx-react-hook-form 2.1.3 → 3.0.1

package/README.md

@@ -39,11 +39,8 @@ class YourVM {
 
 
 const YourView = () => {
-  const form = useMobxForm(yourVM.form)
-
-
   return (
-    <form onSubmit={form.onSubmit} onReset={form.onReset}>
+    <form onSubmit={yourVM.form.submit} onReset={yourVM.form.reset}>
       <Controller control={form.control} name={'username'} render={...} />
     </form>
   )

package/mobx-form/mobx-form.d.ts

@@ -1,33 +1,249 @@
-import { createFormControl, FieldValues, SubmitErrorHandler, SubmitHandler, UseFormProps } from 'react-hook-form';
-import { MobxFormStateReadonly } from './mobx-form-state.js';
+import { BaseSyntheticEvent } from 'react';
+import { Control, createFormControl, DeepMap, DeepPartial, FieldErrors, FieldValues, FormState, UseFormClearErrors, UseFormRegister, UseFormReset, UseFormResetField, UseFormSetError, UseFormSetFocus, UseFormTrigger, UseFormUnregister } from 'react-hook-form';
 import { MobxFormParams } from './mobx-form.types.js';
-export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> {
+type FormFullState<TFieldValues extends FieldValues> = FormState<TFieldValues> & {
+    values: TFieldValues;
+};
+export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> implements FormFullState<TFieldValues> {
     private config;
-    protected abortController: AbortController;
+    values: TFieldValues;
+    isDirty: boolean;
+    isLoading: boolean;
+    isSubmitted: boolean;
+    isSubmitSuccessful: boolean;
+    isSubmitting: boolean;
+    isValidating: boolean;
+    isValid: boolean;
+    disabled: boolean;
+    submitCount: number;
+    defaultValues: Readonly<DeepPartial<TFieldValues>> | undefined;
+    dirtyFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
+    touchedFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
+    validatingFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
+    errors: FieldErrors<TFieldValues>;
+    isReady: boolean;
     /**
-     * Real react-hook-form params
-     * Needed to connect real react-hook-form to this mobx wrapper
+     * Set an error for the field. When set an error which is not associated to a field then manual `clearErrors` invoke is required.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/seterror) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu) • [Video](https://www.youtube.com/watch?v=raMqvE0YyIY)
+     *
+     * @param name - the path name to the form field value.
+     * @param error - an error object which contains type and optional message
+     * @param options - whether or not to focus on the field
+     *
+     * @example
+     * ```tsx
+     * // when the error is not associated with any fields, `clearError` will need to invoke to clear the error
+     * const onSubmit = () => setError("serverError", { type: "server", message: "Error occurred"})
+     *
+     * <button onClick={() => setError("name", { type: "min" })} />
+     *
+     * // focus on the input after setting the error
+     * <button onClick={() => setError("name", { type: "max" }, { shouldFocus: true })} />
+     * ```
      */
-    params: UseFormProps<TFieldValues, TContext, TTransformedValues>;
-    protected handleSubmit(...args: Parameters<SubmitHandler<TTransformedValues>>): void | Promise<void>;
-    protected handleSubmitFailed(...args: Parameters<SubmitErrorHandler<TFieldValues>>): void | Promise<void>;
-    protected handleReset(): void;
+    setError: UseFormSetError<TFieldValues>;
     /**
-     * Original react-hook-form form
+     * Clear the entire form errors.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/clearerrors) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx)
+     *
+     * @param name - the path name to the form field value.
+     *
+     * @example
+     * Clear all errors
+     * ```tsx
+     * clearErrors(); // clear the entire form error
+     * clearErrors(["name", "name1"]) // clear an array of fields' error
+     * clearErrors("name2"); // clear a single field error
+     * ```
+     */
+    clearErrors: UseFormClearErrors<TFieldValues>;
+    /**
+     * Trigger field or form validation
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/trigger) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-triggervalidation-forked-xs7hl) • [Video](https://www.youtube.com/watch?v=-bcyJCDjksE)
+     *
+     * @param name - provide empty argument will trigger the entire form validation, an array of field names will validate an array of fields, and a single field name will only trigger that field's validation.
+     * @param options - should focus on the error field
+     *
+     * @returns validation result
+     *
+     * @example
+     * ```tsx
+     * useEffect(() => {
+     *   trigger();
+     * }, [trigger])
+     *
+     * <button onClick={async () => {
+     *   const result = await trigger(); // result will be a boolean value
+     * }}>
+     *  trigger
+     *  </button>
+     * ```
+     */
+    trigger: UseFormTrigger<TFieldValues>;
+    /**
+     * Reset a field state and reference.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/resetfield) • [Demo](https://codesandbox.io/s/priceless-firefly-d0kuv) • [Video](https://www.youtube.com/watch?v=IdLFcNaEFEo)
+     *
+     * @param name - the path name to the form field value.
+     * @param options - keep form state options
+     *
+     * @example
+     * ```tsx
+     * <input {...register("firstName", { required: true })} />
+     * <button type="button" onClick={() => resetField("firstName"))}>Reset</button>
+     * ```
+     */
+    resetField: UseFormResetField<TFieldValues>;
+    /**
+     * Unregister a field reference and remove its value.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/unregister) • [Demo](https://codesandbox.io/s/react-hook-form-unregister-4k2ey) • [Video](https://www.youtube.com/watch?v=TM99g_NW5Gk&feature=emb_imp_woyt)
+     *
+     * @param name - the path name to the form field value.
+     * @param options - keep form state options
+     *
+     * @example
+     * ```tsx
+     * register("name", { required: true })
+     *
+     * <button onClick={() => unregister("name")} />
+     * // there are various keep options to retain formState
+     * <button onClick={() => unregister("name", { keepErrors: true })} />
+     * ```
+     */
+    unregister: UseFormUnregister<TFieldValues>;
+    /**
+     * Form control
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/control)
+     *
      */
-    form: ReturnType<typeof createFormControl<TFieldValues, TContext, TTransformedValues>>;
+    control: Control<TFieldValues, TContext, TTransformedValues>;
     /**
-     * form state received from form.formState
+     * Register field into hook form with or without the actual DOM ref. You can invoke register anywhere in the component including at `useEffect`.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/register) • [Demo](https://codesandbox.io/s/react-hook-form-register-ts-ip2j3) • [Video](https://www.youtube.com/watch?v=JFIpCoajYkA)
+     *
+     * @param name - the path name to the form field value, name is required and unique
+     * @param options - register options include validation, disabled, unregister, value as and dependent validation
+     *
+     * @returns onChange, onBlur, name, ref, and native contribute attribute if browser validation is enabled.
+     *
+     * @example
+     * ```tsx
+     * // Register HTML native input
+     * <input {...register("input")} />
+     * <select {...register("select")} />
+     *
+     * // Register options
+     * <textarea {...register("textarea", { required: "This is required.", maxLength: 20 })} />
+     * <input type="number" {...register("name2", { valueAsNumber: true })} />
+     * <input {...register("name3", { deps: ["name2"] })} />
+     *
+     * // Register custom field at useEffect
+     * useEffect(() => {
+     *   register("name4");
+     *   register("name5", { value: "hiddenValue" });
+     * }, [register])
+     *
+     * // Register without ref
+     * const { onChange, onBlur, name } = register("name6")
+     * <input onChange={onChange} onBlur={onBlur} name={name} />
+     * ```
      */
-    private _state;
-    get state(): MobxFormStateReadonly<TFieldValues>;
+    register: UseFormRegister<TFieldValues>;
     /**
-     * Raw data received from form.getValues()
+     * Set focus on a registered field. You can start to invoke this method after all fields are mounted to the DOM.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/setfocus) • [Demo](https://codesandbox.io/s/setfocus-rolus)
+     *
+     * @param name - the path name to the form field value.
+     * @param options - input focus behavior options
+     *
+     * @example
+     * ```tsx
+     * useEffect(() => {
+     *   setFocus("name");
+     * }, [setFocus])
+     * // shouldSelect allows to select input's content on focus
+     * <button onClick={() => setFocus("name", { shouldSelect: true })}>Focus</button>
+     * ```
      */
-    get data(): TFieldValues;
+    setFocus: UseFormSetFocus<TFieldValues>;
+    /**
+     * Reset at the entire form state.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/reset) • [Demo](https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901) • [Video](https://www.youtube.com/watch?v=qmCLBjyPwVk)
+     *
+     * @param values - the entire form values to be reset
+     * @param keepStateOptions - keep form state options
+     *
+     * @example
+     * ```tsx
+     * useEffect(() => {
+     *   // reset the entire form after component mount or form defaultValues is ready
+     *   reset({
+     *     fieldA: "test"
+     *     fieldB: "test"
+     *   });
+     * }, [reset])
+     *
+     * // reset by combine with existing form values
+     * reset({
+     *   ...getValues(),
+     *  fieldB: "test"
+     *});
+     *
+     * // reset and keep form state
+     * reset({
+     *   ...getValues(),
+     *}, {
+     *   keepErrors: true,
+     *   keepDirty: true
+     *});
+     * ```
+     */
+    resetForm: UseFormReset<TFieldValues>;
+    protected abortController: AbortController;
+    protected lastRafId: number | undefined;
+    /**
+     * Original react-hook-form form
+     */
+    originalForm: ReturnType<typeof createFormControl<TFieldValues, TContext, TTransformedValues>>;
     constructor(config: MobxFormParams<TFieldValues, TContext, TTransformedValues>);
+    /**
+     * Method to manually submit form.
+     * Used to attach this method to <form /> element
+     *
+     * @example
+     *
+     * <form onSubmit={form.submit} />
+     */
+    submit(e?: BaseSyntheticEvent): Promise<TTransformedValues>;
+    /**
+     * Method to manually reset all form.
+     * Used to attach this method to <form /> element
+     *
+     * @example
+     *
+     * <form onReset={form.reset} />
+     */
+    reset(e?: BaseSyntheticEvent): void;
+    private updateFormState;
     destroy(): void;
-    submit: (event?: any) => Promise<void>;
-    reset: () => void;
 }
+export {};
 //# sourceMappingURL=mobx-form.d.ts.map

package/mobx-form/mobx-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAiB,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,qBAAa,QAAQ,CACnB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY;IAuD/B,OAAO,CAAC,MAAM;IArDhB,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAE3C;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IAEjE,SAAS,CAAC,YAAY,CAEpB,GAAG,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,GACrD,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAKvB,SAAS,CAAC,kBAAkB,CAE1B,GAAG,IAAI,EAAE,UAAU,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,GACpD,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAKvB,SAAS,CAAC,WAAW;IAKrB;;OAEG;IACH,IAAI,EAAE,UAAU,CACd,OAAO,iBAAiB,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CACrE,CAAC;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAA8B;IAE5C,IAAI,KAAK,IAAI,qBAAqB,CAAC,YAAY,CAAC,CAE/C;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,YAAY,CAEvB;gBAGS,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAkD5E,OAAO,IAAI,IAAI;IAIf,MAAM,GAAU,QAAQ,GAAG,mBAOzB;IAEF,KAAK,aAEH;CACH"}
+{"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"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"}

package/mobx-form/mobx-form.js

@@ -1,60 +1,244 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { LinkedAbortController } from 'linked-abort-controller';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, comparer, makeObservable, observable } from 'mobx';
 import { createFormControl, } from 'react-hook-form';
-import { MobxFormState } from './mobx-form-state.js';
 export class MobxForm {
     config;
-    abortController;
+    values;
+    isDirty = false;
+    isLoading = false;
+    isSubmitted = false;
+    isSubmitSuccessful = false;
+    isSubmitting = false;
+    isValidating = false;
+    isValid = false;
+    disabled = false;
+    submitCount = 0;
+    defaultValues;
+    dirtyFields = {};
+    touchedFields = {};
+    validatingFields = {};
+    errors = {};
+    isReady = false;
     /**
-     * Real react-hook-form params
-     * Needed to connect real react-hook-form to this mobx wrapper
+     * Set an error for the field. When set an error which is not associated to a field then manual `clearErrors` invoke is required.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/seterror) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu) • [Video](https://www.youtube.com/watch?v=raMqvE0YyIY)
+     *
+     * @param name - the path name to the form field value.
+     * @param error - an error object which contains type and optional message
+     * @param options - whether or not to focus on the field
+     *
+     * @example
+     * ```tsx
+     * // when the error is not associated with any fields, `clearError` will need to invoke to clear the error
+     * const onSubmit = () => setError("serverError", { type: "server", message: "Error occurred"})
+     *
+     * <button onClick={() => setError("name", { type: "min" })} />
+     *
+     * // focus on the input after setting the error
+     * <button onClick={() => setError("name", { type: "max" }, { shouldFocus: true })} />
+     * ```
      */
-    params;
-    handleSubmit(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ...args) {
-        this.config.onSubmit?.(...args);
-        // used to override
-    }
-    handleSubmitFailed(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ...args) {
-        this.config.onSubmitFailed?.(...args);
-        // used to override
-    }
-    handleReset() {
-        this.config.onReset?.();
-        // used to override
-    }
+    setError;
     /**
-     * Original react-hook-form form
+     * Clear the entire form errors.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/clearerrors) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx)
+     *
+     * @param name - the path name to the form field value.
+     *
+     * @example
+     * Clear all errors
+     * ```tsx
+     * clearErrors(); // clear the entire form error
+     * clearErrors(["name", "name1"]) // clear an array of fields' error
+     * clearErrors("name2"); // clear a single field error
+     * ```
      */
-    form;
+    clearErrors;
     /**
-     * form state received from form.formState
+     * Trigger field or form validation
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/trigger) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-triggervalidation-forked-xs7hl) • [Video](https://www.youtube.com/watch?v=-bcyJCDjksE)
+     *
+     * @param name - provide empty argument will trigger the entire form validation, an array of field names will validate an array of fields, and a single field name will only trigger that field's validation.
+     * @param options - should focus on the error field
+     *
+     * @returns validation result
+     *
+     * @example
+     * ```tsx
+     * useEffect(() => {
+     *   trigger();
+     * }, [trigger])
+     *
+     * <button onClick={async () => {
+     *   const result = await trigger(); // result will be a boolean value
+     * }}>
+     *  trigger
+     *  </button>
+     * ```
      */
-    _state;
-    get state() {
-        return this._state;
-    }
+    trigger;
     /**
-     * Raw data received from form.getValues()
+     * Reset a field state and reference.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/resetfield) • [Demo](https://codesandbox.io/s/priceless-firefly-d0kuv) • [Video](https://www.youtube.com/watch?v=IdLFcNaEFEo)
+     *
+     * @param name - the path name to the form field value.
+     * @param options - keep form state options
+     *
+     * @example
+     * ```tsx
+     * <input {...register("firstName", { required: true })} />
+     * <button type="button" onClick={() => resetField("firstName"))}>Reset</button>
+     * ```
      */
-    get data() {
-        return this._state.values;
-    }
+    resetField;
+    /**
+     * Unregister a field reference and remove its value.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/unregister) • [Demo](https://codesandbox.io/s/react-hook-form-unregister-4k2ey) • [Video](https://www.youtube.com/watch?v=TM99g_NW5Gk&feature=emb_imp_woyt)
+     *
+     * @param name - the path name to the form field value.
+     * @param options - keep form state options
+     *
+     * @example
+     * ```tsx
+     * register("name", { required: true })
+     *
+     * <button onClick={() => unregister("name")} />
+     * // there are various keep options to retain formState
+     * <button onClick={() => unregister("name", { keepErrors: true })} />
+     * ```
+     */
+    unregister;
+    /**
+     * Form control
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/control)
+     *
+     */
+    control;
+    /**
+     * Register field into hook form with or without the actual DOM ref. You can invoke register anywhere in the component including at `useEffect`.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/register) • [Demo](https://codesandbox.io/s/react-hook-form-register-ts-ip2j3) • [Video](https://www.youtube.com/watch?v=JFIpCoajYkA)
+     *
+     * @param name - the path name to the form field value, name is required and unique
+     * @param options - register options include validation, disabled, unregister, value as and dependent validation
+     *
+     * @returns onChange, onBlur, name, ref, and native contribute attribute if browser validation is enabled.
+     *
+     * @example
+     * ```tsx
+     * // Register HTML native input
+     * <input {...register("input")} />
+     * <select {...register("select")} />
+     *
+     * // Register options
+     * <textarea {...register("textarea", { required: "This is required.", maxLength: 20 })} />
+     * <input type="number" {...register("name2", { valueAsNumber: true })} />
+     * <input {...register("name3", { deps: ["name2"] })} />
+     *
+     * // Register custom field at useEffect
+     * useEffect(() => {
+     *   register("name4");
+     *   register("name5", { value: "hiddenValue" });
+     * }, [register])
+     *
+     * // Register without ref
+     * const { onChange, onBlur, name } = register("name6")
+     * <input onChange={onChange} onBlur={onBlur} name={name} />
+     * ```
+     */
+    register;
+    /**
+     * Set focus on a registered field. You can start to invoke this method after all fields are mounted to the DOM.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/setfocus) • [Demo](https://codesandbox.io/s/setfocus-rolus)
+     *
+     * @param name - the path name to the form field value.
+     * @param options - input focus behavior options
+     *
+     * @example
+     * ```tsx
+     * useEffect(() => {
+     *   setFocus("name");
+     * }, [setFocus])
+     * // shouldSelect allows to select input's content on focus
+     * <button onClick={() => setFocus("name", { shouldSelect: true })}>Focus</button>
+     * ```
+     */
+    setFocus;
+    /**
+     * Reset at the entire form state.
+     *
+     * @remarks
+     * [API](https://react-hook-form.com/docs/useform/reset) • [Demo](https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901) • [Video](https://www.youtube.com/watch?v=qmCLBjyPwVk)
+     *
+     * @param values - the entire form values to be reset
+     * @param keepStateOptions - keep form state options
+     *
+     * @example
+     * ```tsx
+     * useEffect(() => {
+     *   // reset the entire form after component mount or form defaultValues is ready
+     *   reset({
+     *     fieldA: "test"
+     *     fieldB: "test"
+     *   });
+     * }, [reset])
+     *
+     * // reset by combine with existing form values
+     * reset({
+     *   ...getValues(),
+     *  fieldB: "test"
+     *});
+     *
+     * // reset and keep form state
+     * reset({
+     *   ...getValues(),
+     *}, {
+     *   keepErrors: true,
+     *   keepDirty: true
+     *});
+     * ```
+     */
+    resetForm;
+    abortController;
+    lastRafId;
+    /**
+     * Original react-hook-form form
+     */
+    originalForm;
     constructor(config) {
         this.config = config;
-        this.params = config;
         this.abortController = new LinkedAbortController(config.abortSignal);
-        this.form = createFormControl(config);
-        this._state = new MobxFormState({
-            values: this.form.getValues(),
+        this.originalForm = createFormControl(config);
+        this.setError = this.originalForm.setError;
+        this.clearErrors = this.originalForm.clearErrors;
+        this.trigger = this.originalForm.trigger;
+        this.resetField = this.originalForm.resetField;
+        this.unregister = this.originalForm.unregister;
+        this.control = this.originalForm.control;
+        this.register = this.originalForm.register;
+        this.setFocus = this.originalForm.setFocus;
+        this.resetForm = this.originalForm.reset;
+        Object.assign(this, {
+            values: this.originalForm.getValues(),
             defaultValues: config.defaultValues || {},
         });
-        this.params = config;
-        const subscription = this.form.subscribe({
+        const subscription = this.originalForm.subscribe({
             formState: {
                 values: true,
                 errors: true,
@@ -66,34 +250,120 @@ export class MobxForm {
                 validatingFields: true,
             },
             callback: (rawFormState) => {
-                this._state.update(rawFormState);
+                if (this.config.lazyUpdates === false) {
+                    this.updateFormState(rawFormState);
+                }
+                else {
+                    if (this.lastRafId !== undefined) {
+                        cancelAnimationFrame(this.lastRafId);
+                        this.lastRafId = undefined;
+                    }
+                    this.lastRafId = requestAnimationFrame(() => {
+                        this.updateFormState(rawFormState);
+                        this.lastRafId = undefined;
+                    });
+                }
             },
         });
+        observable.deep(this, 'values');
+        observable.ref(this, 'isDirty');
+        observable.ref(this, 'isLoading');
+        observable.ref(this, 'isSubmitted');
+        observable.ref(this, 'isSubmitSuccessful');
+        observable.ref(this, 'isSubmitting');
+        observable.ref(this, 'isValidating');
+        observable.ref(this, 'isValid');
+        observable.ref(this, 'disabled');
+        observable.ref(this, 'submitCount');
+        observable.ref(this, 'isReady');
+        observable.deep(this, 'defaultValues');
+        observable.deep(this, 'dirtyFields');
+        observable.deep(this, 'touchedFields');
+        observable.deep(this, 'validatingFields');
+        observable.deep(this, 'errors');
+        action(this, 'updateFormState');
+        observable.ref(this, 'originalForm');
+        action.bound(this, 'submit');
+        action.bound(this, 'reset');
+        makeObservable(this);
         this.abortController.signal.addEventListener('abort', () => {
             subscription();
             // @ts-ignore
-            this.form = null;
+            this.originalForm = null;
             // @ts-ignore
             this.data = null;
         });
-        computed.struct(this, 'data');
-        computed.struct(this, 'state');
-        observable.ref(this, 'params');
-        observable.ref(this, 'form');
-        action.bound(this, 'setParams');
-        action.bound(this, 'updateParams');
-        action.bound(this, 'syncForm');
-        makeObservable(this);
+    }
+    /**
+     * Method to manually submit form.
+     * Used to attach this method to <form /> element
+     *
+     * @example
+     *
+     * <form onSubmit={form.submit} />
+     */
+    submit(e) {
+        return new Promise((resolve, reject) => {
+            this.originalForm.handleSubmit((data, event) => {
+                this.config.onSubmit?.(data, event);
+                resolve(data);
+            }, (errors, event) => {
+                this.config.onSubmitFailed?.(errors, event);
+                reject(errors);
+            })(e);
+        });
+    }
+    /**
+     * Method to manually reset all form.
+     * Used to attach this method to <form /> element
+     *
+     * @example
+     *
+     * <form onReset={form.reset} />
+     */
+    reset(e) {
+        this.resetForm();
+        this.config.onReset?.(e);
+    }
+    updateFormState({ values, errors, ...simpleProperties }) {
+        Object.entries(simpleProperties).forEach(([key, value]) => {
+            if (value != null) {
+                // @ts-ignore
+                this[key] = value;
+            }
+        });
+        console.info('update form state', errors);
+        if (errors) {
+            const currentErrorsSet = new Set(Object.keys(this.errors));
+            const newErrors = Object.keys(errors);
+            for (const errorField of newErrors) {
+                if (currentErrorsSet.has(errorField)) {
+                    currentErrorsSet.delete(errorField);
+                    if (!comparer.structural(this.errors[errorField], errors[errorField])) {
+                        // @ts-ignore
+                        Object.assign(this.errors[errorField], errors[errorField]);
+                    }
+                }
+                else {
+                    // @ts-ignore
+                    this.errors[errorField] = errors[errorField];
+                }
+            }
+            currentErrorsSet.forEach((errorField) => {
+                // @ts-ignore
+                delete this.errors[errorField];
+            });
+        }
+        else {
+            this.errors = {};
+        }
+        // @ts-ignore
+        this.values = values ?? {};
     }
     destroy() {
         this.abortController.abort();
-    }
-    submit = async (event) => {
-        if (this.config.onSubmit) {
-            await this.form.handleSubmit(this.config.onSubmit, this.config.onSubmitFailed)(event);
+        if (this.lastRafId !== undefined) {
+            cancelAnimationFrame(this.lastRafId);
         }
-    };
-    reset = () => {
-        this.form.reset();
-    };
+    }
 }

package/mobx-form/mobx-form.types.d.ts

@@ -20,9 +20,13 @@ export interface MobxFormParams<TFieldValues extends FieldValues = FieldValues,
     /**
      * Form reset handler
      */
-    onReset?: VoidFunction;
+    onReset?: (event: any) => void;
+    /**
+     * lazy mobx form state updates using requestAnimationFrame
+     * @default - {true}
+     */
+    lazyUpdates?: boolean;
 }
-export type ExtractFormFieldValues<T extends AnyMobxForm> = Exclude<T['params']['values'], undefined | null>;
-export type ExtractFormContext<T extends AnyMobxForm> = Exclude<T['params']['context'], undefined | null>;
+export type ExtractFormFieldValues<T extends AnyMobxForm> = Exclude<T['values'], undefined | null>;
 export type ExtractFormFieldOutputValues<T extends AnyMobxForm> = T extends MobxForm<any, any, infer TFieldOutputValues> ? TFieldOutputValues : never;
 //# sourceMappingURL=mobx-form.types.d.ts.map

package/mobx-form/mobx-form.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,cAAc,CAC7B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY,CACjC,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAChE;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CACjE,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EACrB,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAC7D,CAAC,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EACtB,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,WAAW,IAC5D,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC,GAClD,kBAAkB,GAClB,KAAK,CAAC"}
+{"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,cAAc,CAC7B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY,CACjC,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAChE;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CACjE,CAAC,CAAC,QAAQ,CAAC,EACX,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,WAAW,IAC5D,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC,GAClD,kBAAkB,GAClB,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-react-hook-form",
-  "version": "2.1.3",
+  "version": "3.0.1",
   "description": "",
   "type": "module",
   "keywords": [],
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "disposer-util": "^2.0.0",
+    "@types/react": "^18.3.1",
     "linked-abort-controller": "^1.1.0",
     "lodash-es": "^4.17.21",
     "yummies": "^3.0.39"
@@ -46,11 +47,6 @@
       "default": "./mobx-form/index.js",
       "types": "./mobx-form/index.d.ts"
     },
-    "./mobx-form/mobx-form-state": {
-      "import": "./mobx-form/mobx-form-state.js",
-      "default": "./mobx-form/mobx-form-state.js",
-      "types": "./mobx-form/mobx-form-state.d.ts"
-    },
     "./mobx-form/mobx-form": {
       "import": "./mobx-form/mobx-form.js",
       "default": "./mobx-form/mobx-form.js",

package/mobx-form/mobx-form-state.d.ts

@@ -1,28 +0,0 @@
-import { DeepMap, DeepPartial, FieldErrors, FieldValues, FormState } from 'react-hook-form';
-type FormValues<TFieldValues extends FieldValues> = {
-    values: TFieldValues;
-};
-type MobxFormStateUpdate<TFieldValues extends FieldValues> = Omit<Partial<MobxFormState<TFieldValues>>, 'update'>;
-export type MobxFormStateReadonly<TFieldValues extends FieldValues> = Readonly<Omit<MobxFormState<TFieldValues>, 'update'>>;
-export declare class MobxFormState<TFieldValues extends FieldValues = FieldValues> implements FormState<TFieldValues>, FormValues<TFieldValues> {
-    values: TFieldValues;
-    isDirty: boolean;
-    isLoading: boolean;
-    isSubmitted: boolean;
-    isSubmitSuccessful: boolean;
-    isSubmitting: boolean;
-    isValidating: boolean;
-    isValid: boolean;
-    disabled: boolean;
-    submitCount: number;
-    defaultValues: Readonly<DeepPartial<TFieldValues>> | undefined;
-    dirtyFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
-    touchedFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
-    validatingFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
-    errors: FieldErrors<TFieldValues>;
-    isReady: boolean;
-    constructor(initialState?: MobxFormStateUpdate<TFieldValues>);
-    update({ values, errors, ...simpleProperties }: MobxFormStateUpdate<TFieldValues>): void;
-}
-export {};
-//# sourceMappingURL=mobx-form-state.d.ts.map

package/mobx-form/mobx-form-state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mobx-form-state.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form-state.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,OAAO,EACP,WAAW,EACX,WAAW,EACX,WAAW,EACX,SAAS,EACV,MAAM,iBAAiB,CAAC;AAEzB,KAAK,UAAU,CAAC,YAAY,SAAS,WAAW,IAAI;IAClD,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC;AAEF,KAAK,mBAAmB,CAAC,YAAY,SAAS,WAAW,IAAI,IAAI,CAC/D,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,EACpC,QAAQ,CACT,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,YAAY,SAAS,WAAW,IAAI,QAAQ,CAC5E,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,CAC5C,CAAC;AAEF,qBAAa,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACvE,YAAW,SAAS,CAAC,YAAY,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC;IAE5D,MAAM,EAAG,YAAY,CAAC;IACtB,OAAO,EAAE,OAAO,CAAS;IACzB,SAAS,EAAE,OAAO,CAAS;IAC3B,WAAW,EAAE,OAAO,CAAS;IAC7B,kBAAkB,EAAE,OAAO,CAAS;IACpC,YAAY,EAAE,OAAO,CAAS;IAC9B,YAAY,EAAE,OAAO,CAAS;IAC9B,OAAO,EAAE,OAAO,CAAS;IACzB,QAAQ,EAAE,OAAO,CAAS;IAC1B,WAAW,EAAE,MAAM,CAAK;IACxB,aAAa,EAAE,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,GAAG,SAAS,CAAC;IAC/D,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CACtE;IACL,aAAa,EAAE,OAAO,CACpB,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CACtD,CAAM;IACP,gBAAgB,EAAE,OAAO,CACvB,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CACtD,CAAM;IACP,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,CAAM;IACvC,OAAO,EAAE,OAAO,CAAS;gBAEb,YAAY,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC;IA0B5D,MAAM,CAAC,EACL,MAAM,EACN,MAAM,EACN,GAAG,gBAAgB,EACpB,EAAE,mBAAmB,CAAC,YAAY,CAAC;CAkCrC"}

package/mobx-form/mobx-form-state.js

@@ -1,76 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { action, makeObservable, observable } from 'mobx';
-export class MobxFormState {
-    values;
-    isDirty = false;
-    isLoading = false;
-    isSubmitted = false;
-    isSubmitSuccessful = false;
-    isSubmitting = false;
-    isValidating = false;
-    isValid = false;
-    disabled = false;
-    submitCount = 0;
-    defaultValues;
-    dirtyFields = {};
-    touchedFields = {};
-    validatingFields = {};
-    errors = {};
-    isReady = false;
-    constructor(initialState) {
-        if (initialState) {
-            Object.assign(this, initialState);
-        }
-        observable.deep(this, 'values');
-        observable.ref(this, 'isDirty');
-        observable.ref(this, 'isLoading');
-        observable.ref(this, 'isSubmitted');
-        observable.ref(this, 'isSubmitSuccessful');
-        observable.ref(this, 'isSubmitting');
-        observable.ref(this, 'isValidating');
-        observable.ref(this, 'isValid');
-        observable.ref(this, 'disabled');
-        observable.ref(this, 'submitCount');
-        observable.ref(this, 'isReady');
-        observable.deep(this, 'defaultValues');
-        observable.deep(this, 'dirtyFields');
-        observable.deep(this, 'touchedFields');
-        observable.deep(this, 'validatingFields');
-        observable.deep(this, 'errors');
-        action(this, 'update');
-        makeObservable(this);
-    }
-    update({ values, errors, ...simpleProperties }) {
-        Object.entries(simpleProperties).forEach(([key, value]) => {
-            if (value != null) {
-                // @ts-ignore
-                this[key] = value;
-            }
-        });
-        if (errors) {
-            const currentErrorsSet = new Set(Object.keys(this.errors));
-            const newErrors = Object.keys(errors);
-            for (const errorField of newErrors) {
-                if (currentErrorsSet.has(errorField)) {
-                    currentErrorsSet.delete(errorField);
-                    // @ts-ignore
-                    Object.assign(this.errors[errorField], errors[errorField]);
-                }
-                else {
-                    // @ts-ignore
-                    this.errors[errorField] = errors[errorField];
-                }
-            }
-            currentErrorsSet.forEach((errorField) => {
-                // @ts-ignore
-                delete this.errors[errorField];
-            });
-        }
-        else {
-            this.errors = {};
-        }
-        // @ts-ignore
-        this.values = values ?? {};
-    }
-}