mobx-react-hook-form 2.0.16 → 2.0.17

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

@@ -1,6 +1,6 @@
-import { DeepPartial, FormState, SubmitErrorHandler, SubmitHandler, UseFormProps, createFormControl } from 'react-hook-form';
+import { DeepPartial, FormState, SubmitErrorHandler, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
 import type { AnyObject, Maybe } from 'yummies/utils/types';
-import { MobxFormParams } from './mobx-form.types';
+import { ConnectedMobxForm, MobxFormParams } from './mobx-form.types';
 export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TFieldOutputValues extends AnyObject = TFieldValues> {
     private config;
     protected abortController: AbortController;
@@ -9,11 +9,13 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
      * Needed to connect real react-hook-form to this mobx wrapper
      */
     params: UseFormProps<TFieldValues, TContext>;
+    protected handleSubmit(...args: Parameters<SubmitHandler<TFieldOutputValues>>): void | Promise<void>;
+    protected handleSubmitFailed(...args: Parameters<SubmitErrorHandler<TFieldValues>>): void | Promise<void>;
     protected handleReset(): void;
     /**
      * Original react-hook-form form
      */
-    instance: Maybe<ReturnType<typeof createFormControl<TFieldValues, TContext>>>;
+    form: Maybe<UseFormReturn<TFieldValues, TContext, TFieldOutputValues>>;
     /**
      * form state received from form.formState
      */
@@ -22,13 +24,8 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
      * Raw data received from form.getValues()
      */
     data: Maybe<DeepPartial<TFieldValues>>;
-    onSubmit: (event?: any) => Promise<void>;
     protected isConnected: boolean;
     constructor(config: MobxFormParams<TFieldValues, TContext, TFieldOutputValues>);
-    protected handleSubmit(...args: Parameters<SubmitHandler<TFieldOutputValues>>): void | Promise<void>;
-    protected handleSubmitFailed(...args: Parameters<SubmitErrorHandler<TFieldValues>>): void | Promise<void>;
-    protected syncForm(formState: Partial<FormState<TFieldValues>>, data?: DeepPartial<TFieldValues> | TFieldValues): void;
-    onReset: () => void;
     /**
      * Allows to modify real react-hook-form useForm() payload
      */
@@ -37,7 +34,13 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
      * Allows to modify real react-hook-form useForm() payload
      */
     updateParams(params: Partial<UseFormProps<TFieldValues, TContext>>): void;
-    destroy(): void;
+    protected syncForm(formResult: UseFormReturn<TFieldValues, TContext, TFieldOutputValues>, data?: DeepPartial<TFieldValues>): void;
+    /**
+     * Needed to connect real react-hook-form to this mobx wrapper
+     *
+     * This is used in useMobxForm
+     */
+    protected connect(formResult: UseFormReturn<TFieldValues, TContext, TFieldOutputValues>): ConnectedMobxForm<TFieldValues, TContext, TFieldOutputValues>;
     /**
      * @deprecated use destroy();
      */

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":"AAQA,OAAO,EACL,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,iBAAiB,EAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAcnD,qBAAa,QAAQ,CACnB,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,EACd,kBAAkB,SAAS,SAAS,GAAG,YAAY;IAmCjD,OAAO,CAAC,MAAM;IAjChB,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAE3C;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE7C,SAAS,CAAC,WAAW;IAKrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9E;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,WAAW,UAAS;gBAGpB,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IA2E5E,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,QAAQ,CAChB,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,EAC3C,IAAI,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,GAAG,YAAY;IAUjD,OAAO,aAEL;IAEF;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAItD;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAIlE,OAAO;IAIP;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}
+{"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE,qBAAa,QAAQ,CACnB,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,EACd,kBAAkB,SAAS,SAAS,GAAG,YAAY;IAiDjD,OAAO,CAAC,MAAM;IA/ChB,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAE3C;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE7C,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,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEvE;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvC,SAAS,CAAC,WAAW,UAAS;gBAGpB,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAwD5E;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAItD;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAIlE,SAAS,CAAC,QAAQ,CAChB,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,EACrE,IAAI,GAAE,WAAW,CAAC,YAAY,CAAiC;IAOjE;;;;OAIG;IACH,SAAS,CAAC,OAAO,CACf,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,GACpE,iBAAiB,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IA4ChE;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}

package/mobx-form/mobx-form.js

@@ -1,16 +1,5 @@
 import { LinkedAbortController } from 'linked-abort-controller';
-import { action, makeObservable, observable, reaction, runInAction, } from 'mobx';
-import { createFormControl, } from 'react-hook-form';
-const dependsOn = {
-    isDirty: true,
-    isLoading: true,
-    isValidating: true,
-    isValid: true,
-    dirtyFields: true,
-    touchedFields: true,
-    validatingFields: true,
-    errors: true,
-};
+import { action, makeObservable, observable, reaction } from 'mobx';
 export class MobxForm {
     config;
     abortController;
@@ -19,6 +8,18 @@ export class MobxForm {
      * Needed to connect real react-hook-form to this mobx wrapper
      */
     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
@@ -26,7 +27,7 @@ export class MobxForm {
     /**
      * Original react-hook-form form
      */
-    instance;
+    form;
     /**
      * form state received from form.formState
      */
@@ -35,7 +36,6 @@ export class MobxForm {
      * Raw data received from form.getValues()
      */
     data;
-    onSubmit;
     isConnected = false;
     constructor(config) {
         this.config = config;
@@ -46,7 +46,7 @@ export class MobxForm {
             config.disposer.add(() => this.dispose());
         }
         this.abortController.signal.addEventListener('abort', () => {
-            this.instance = null;
+            this.form = null;
             this.data = null;
         });
         this.state = {
@@ -69,22 +69,9 @@ export class MobxForm {
         observable.deep(this, 'state');
         observable.deep(this, 'data');
         observable.ref(this, 'params');
-        observable.ref(this, 'instance');
         action.bound(this, 'setParams');
+        action.bound(this, 'updateParams');
         action.bound(this, 'syncForm');
-        this.instance = createFormControl(config);
-        this.onSubmit = this.instance?.handleSubmit(this.handleSubmit.bind(this), this.handleSubmitFailed.bind(this));
-        /**
-         *
-         *
-         * Subscribes
-         *
-         *
-         */
-        this.instance.subscribe({
-            formState: dependsOn,
-            callback: (formState) => this.syncForm(formState, formState.values),
-        });
         makeObservable(this);
         if (config.getParams) {
             reaction(config.getParams, (params) => {
@@ -94,29 +81,6 @@ export class MobxForm {
             });
         }
     }
-    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
-    }
-    syncForm(formState, data) {
-        runInAction(() => {
-            Object.assign(this.state, formState);
-            if (this.data) {
-                this.data = data;
-            }
-        });
-    }
-    onReset = () => {
-        this.config.onReset?.();
-    };
     /**
      * Allows to modify real react-hook-form useForm() payload
      */
@@ -129,13 +93,52 @@ export class MobxForm {
     updateParams(params) {
         this.setParams({ ...this.params, ...params });
     }
-    destroy() {
-        this.abortController.abort();
+    syncForm(formResult, data = formResult.getValues()) {
+        this.form = formResult;
+        this.state = formResult.formState;
+        this.data = data;
+    }
+    /**
+     * Needed to connect real react-hook-form to this mobx wrapper
+     *
+     * This is used in useMobxForm
+     */
+    connect(formResult) {
+        if (!this.isConnected) {
+            this.isConnected = true;
+            this.syncForm(formResult);
+            const formWatchSubscription = formResult.watch((values) => {
+                this.syncForm(formResult, values);
+            });
+            this.abortController.signal.addEventListener('abort', formWatchSubscription.unsubscribe);
+        }
+        return {
+            ...formResult,
+            onReset: () => this.handleReset(),
+            onSubmit: formResult.handleSubmit(
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            (...args) => this.handleSubmit(...args), (...args) => this.handleSubmitFailed(...args)),
+            handleSubmit: (onValid, onInvalid) => {
+                return formResult.handleSubmit(
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                async (...args) => {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-expect-error
+                    await this.handleSubmit(...args);
+                    await onValid(...args);
+                }, async (...args) => {
+                    await this.handleSubmitFailed(...args);
+                    await onInvalid?.(...args);
+                });
+            },
+        };
     }
     /**
      * @deprecated use destroy();
      */
     dispose() {
-        this.destroy();
+        this.abortController.abort();
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-react-hook-form",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "",
   "keywords": [],
   "author": "js2me",
@@ -8,10 +8,10 @@
   "peerDependencies": {
     "mobx": "^6.12.4",
     "mobx-react-lite": "^4.0.7",
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-hook-form": "^7.53.0"
   },
   "dependencies": {
-    "react-hook-form": "^7.55.0-next.3",
     "disposer-util": "^1.0.11",
     "linked-abort-controller": "^1.0.1",
     "lodash-es": "^4.17.21",
@@ -20,10 +20,9 @@
   "devDependencies": {
     "@types/lodash-es": "4.17.12",
     "eslint": "8.57.0",
-    "js2me-eslint-config": "1.0.7",
+    "js2me-eslint-config": "1.0.4",
     "js2me-exports-post-build-script": "2.0.10",
     "rimraf": "6.0.1",
-    "prettier": "3.3.3",
     "typescript": "5.6.2"
   },
   "exports": {