mobx-react-hook-form 1.0.1 → 1.0.4

package/README.md

@@ -1,16 +1,40 @@
-# mobx-react-hook-form  
-
-
-Simple wrapper for `react-hook-form` package   
+# [mobx-react-hook-form](https://github.com/js2me/mobx-react-hook-form)
 
+Simple [react-hook-form](https://react-hook-form.com/) wrapper for [MobX](https://mobx.js.org/).  
 
 ## Usage  
 
 ```tsx
+import { reaction } from "mobx"
 import { MobxForm } from "mobx-react-hook-form"
 
 class YourVM { 
-  form = new MobxForm()
+  form = new MobxForm({
+    disposer?: this.disposer,
+    resolver: valibotResolver(
+      v.object({
+        username: v.string('This field is required')
+      })
+    ),
+    onSubmit: ({ username }) => {
+      console.info("nick username", username);
+    },
+    onSubmitFailed: () => {
+      //
+    },
+    onReset: () => {
+      //
+    }
+  })
+
+  mount(){
+    reaction(
+      () => this.form.data?.username,
+      (username) => {
+        //
+      }
+    )
+  }
 }
 
 
@@ -19,7 +43,9 @@ const YourView = () => {
 
 
   return (
-    <form {...form.register(...)}></form>
+    <form onSubmit={form.onSubmit} onReset={form.onReset}>
+      <Controller control={form.control} name={'username'} render={...} />
+    </form>
   )
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"use-mobx-form.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobx-form.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE3D,eAAO,MAAM,WAAW,GAAI,YAAY,SAAS,SAAS,EAAE,QAAQ,YACxD,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,KACzC,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAG1C,CAAC"}
+{"version":3,"file":"use-mobx-form.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobx-form.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE3D,eAAO,MAAM,WAAW,GAAI,YAAY,SAAS,SAAS,EAAE,QAAQ,YACxD,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,KACzC,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAEC,CAAC"}

package/hooks/use-mobx-form.js

@@ -1,5 +1,4 @@
 import { useForm } from 'react-hook-form';
-export const useMobxForm = (mobxForm) => {
-    const reactHookForm = useForm(mobxForm.getRHFParams());
-    return mobxForm.connectRHF(reactHookForm);
-};
+export const useMobxForm = (mobxForm) => 
+// @ts-expect-error ts(2445)
+mobxForm.connect(useForm(mobxForm.params));

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

@@ -1,35 +1,41 @@
 import { Disposable, IDisposer } from 'disposer-util';
-import { FormState, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { DeepPartial, FormState, UseFormProps, UseFormReturn } from 'react-hook-form';
 import { AnyObject, Maybe } from 'yammies/utils/types';
 import { ConnectedMobxForm, MobxFormParams } from './mobx-form.types';
 export declare class MobxForm<TFieldValues extends AnyObject, TContext = any> implements Disposable {
     protected disposer: IDisposer;
-    protected RHFParams: UseFormProps<TFieldValues, TContext>;
+    /**
+     * Readl react-hook-form params
+     * Needed to connect real react-hook-form to this mobx wrapper
+     */
+    protected params: UseFormProps<TFieldValues, TContext>;
     protected submitHandler?: MobxFormParams<TFieldValues, TContext>['onSubmit'];
     protected submitErrorHandler?: MobxFormParams<TFieldValues, TContext>['onSubmitFailed'];
     protected resetHandler?: MobxFormParams<TFieldValues, TContext>['onReset'];
+    /**
+     * Original react-hook-form form
+     */
     form: Maybe<UseFormReturn<TFieldValues, TContext>>;
+    /**
+     * form state received from form.formState
+     */
     state: FormState<TFieldValues>;
-    data: Maybe<TFieldValues>;
+    /**
+     * Raw data received from form.getValues()
+     */
+    data: Maybe<DeepPartial<TFieldValues>>;
+    protected isConnected: boolean;
     constructor({ disposer, onSubmit, onSubmitFailed, onReset, ...RHFParams }: MobxFormParams<TFieldValues, TContext>);
-    getRHFParams(): Partial<{
-        mode: import("react-hook-form").Mode;
-        disabled: boolean;
-        reValidateMode: Exclude<import("react-hook-form").Mode, "onTouched" | "all">;
-        defaultValues: ((payload?: unknown) => Promise<TFieldValues>) | import("react-hook-form").DefaultValues<TFieldValues>;
-        values: TFieldValues;
-        errors: import("react-hook-form").FieldErrors<TFieldValues>;
-        resetOptions: Parameters<import("react-hook-form").UseFormReset<TFieldValues_1>>[1];
-        resolver: import("react-hook-form").Resolver<TFieldValues, TContext>;
-        context: TContext;
-        shouldFocusError: boolean;
-        shouldUnregister: boolean;
-        shouldUseNativeValidation: boolean;
-        progressive: boolean;
-        criteriaMode: import("react-hook-form").CriteriaMode;
-        delayError: number;
-    }>;
-    connectRHF(formResult: UseFormReturn<TFieldValues, TContext>): ConnectedMobxForm<TFieldValues, TContext>;
+    /**
+     * Allows to modify real react-hook-form useForm() payload
+     */
+    setParams(params: UseFormProps<TFieldValues, TContext>): void;
+    /**
+     * Needed to connect real react-hook-form to this mobx wrapper
+     *
+     * This is used in useMobxForm
+     */
+    protected connect(formResult: UseFormReturn<TFieldValues, TContext>): ConnectedMobxForm<TFieldValues, TContext>;
     dispose(): void;
 }
 //# 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":"AAAA,OAAO,EAAE,UAAU,EAAY,SAAS,EAAE,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE,qBAAa,QAAQ,CAAC,YAAY,SAAS,SAAS,EAAE,QAAQ,GAAG,GAAG,CAClE,YAAW,UAAU;IAErB,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC;IAE9B,SAAS,CAAC,SAAS,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE1D,SAAS,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7E,SAAS,CAAC,kBAAkB,CAAC,EAAE,cAAc,CAC3C,YAAY,EACZ,QAAQ,CACT,CAAC,gBAAgB,CAAC,CAAC;IACpB,SAAS,CAAC,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IAE3E,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnD,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAE/B,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;gBAEd,EACV,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,OAAO,EACP,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC;IA8BzC,YAAY;;;;;;;;;;;;;;;;;IAIZ,UAAU,CACR,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,GAChD,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAAC;IAiB5C,OAAO,IAAI,IAAI;CAMhB"}
+{"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAY,SAAS,EAAE,MAAM,eAAe,CAAC;AAGhE,OAAO,EACL,WAAW,EACX,SAAS,EACT,YAAY,EACZ,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE,qBAAa,QAAQ,CAAC,YAAY,SAAS,SAAS,EAAE,QAAQ,GAAG,GAAG,CAClE,YAAW,UAAU;IAErB,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC;IAE9B;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAEvD,SAAS,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7E,SAAS,CAAC,kBAAkB,CAAC,EAAE,cAAc,CAC3C,YAAY,EACZ,QAAQ,CACT,CAAC,gBAAgB,CAAC,CAAC;IACpB,SAAS,CAAC,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IAE3E;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnD;;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;gBAElB,EACV,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,OAAO,EACP,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC;IAgCzC;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAItD;;;;OAIG;IACH,SAAS,CAAC,OAAO,CACf,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,GAChD,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAAC;IA+B5C,OAAO,IAAI,IAAI;CAMhB"}

package/mobx-form/mobx-form.js

@@ -1,15 +1,29 @@
 import { Disposer } from 'disposer-util';
 import noop from 'lodash-es/noop';
-import { makeObservable, observable, runInAction } from 'mobx';
+import { action, makeObservable, observable, runInAction } from 'mobx';
 export class MobxForm {
     disposer;
-    RHFParams;
+    /**
+     * Readl react-hook-form params
+     * Needed to connect real react-hook-form to this mobx wrapper
+     */
+    params;
     submitHandler;
     submitErrorHandler;
     resetHandler;
+    /**
+     * Original react-hook-form form
+     */
     form;
+    /**
+     * form state received from form.formState
+     */
     state;
+    /**
+     * Raw data received from form.getValues()
+     */
     data;
+    isConnected = false;
     constructor({ disposer, onSubmit, onSubmitFailed, onReset, ...RHFParams }) {
         this.disposer = disposer ?? new Disposer();
         this.state = {
@@ -31,21 +45,41 @@ export class MobxForm {
         this.submitHandler = onSubmit;
         this.submitErrorHandler = onSubmitFailed;
         this.resetHandler = onReset;
-        this.RHFParams = RHFParams;
+        this.params = RHFParams;
         makeObservable(this, {
             state: observable.deep,
             data: observable.deep,
+            RHFParams: observable.ref,
+            setParams: action.bound,
         });
     }
-    getRHFParams() {
-        return this.RHFParams;
+    /**
+     * Allows to modify real react-hook-form useForm() payload
+     */
+    setParams(params) {
+        this.params = params;
     }
-    connectRHF(formResult) {
-        runInAction(() => {
-            this.form = formResult;
-            this.state = formResult.formState;
-            this.data = formResult.getValues();
-        });
+    /**
+     * Needed to connect real react-hook-form to this mobx wrapper
+     *
+     * This is used in useMobxForm
+     */
+    connect(formResult) {
+        if (!this.isConnected) {
+            this.isConnected = true;
+            runInAction(() => {
+                this.form = formResult;
+                this.state = formResult.formState;
+                this.data = formResult.getValues();
+            });
+            this.disposer.add(formResult.watch(() => {
+                runInAction(() => {
+                    this.form = formResult;
+                    this.state = formResult.formState;
+                    this.data = formResult.getValues();
+                });
+            }).unsubscribe);
+        }
         return {
             ...formResult,
             onReset: this.resetHandler ?? noop,

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

@@ -1,14 +1,40 @@
 import { IDisposer } from 'disposer-util';
 import { SubmitErrorHandler, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
 import { AnyObject } from 'yammies/utils/types';
+/**
+ * Additional options for {@link MobxForm} constructor
+ */
 export interface MobxFormParams<TFieldValues extends AnyObject, TContext = any> extends UseFormProps<TFieldValues, TContext> {
+    /**
+     * Disposer for mobx form
+     */
     disposer?: IDisposer;
+    /**
+     * Form submit handler
+     */
     onSubmit?: SubmitHandler<TFieldValues>;
+    /**
+     * Form submit failed handler
+     */
     onSubmitFailed?: SubmitErrorHandler<TFieldValues>;
+    /**
+     * Form reset handler
+     */
     onReset?: VoidFunction;
 }
+/**
+ * Interface for a connected Mobx form.
+ * Extends the properties of react-hook-form's UseFormReturn,
+ * excluding the 'handleSubmit' method, and adds custom form handlers.
+ */
 export interface ConnectedMobxForm<TFieldValues extends AnyObject, TContext = any> extends Omit<UseFormReturn<TFieldValues, TContext>, 'handleSubmit'> {
-    onSubmit: VoidFunction;
+    /**
+     * Handler to reset the form.
+     */
     onReset: VoidFunction;
+    /**
+     * Handler to submit the form.
+     */
+    onSubmit: VoidFunction;
 }
 //# 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,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,cAAc,CAAC,YAAY,SAAS,SAAS,EAAE,QAAQ,GAAG,GAAG,CAC5E,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB,CAChC,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,CACd,SAAQ,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,cAAc,CAAC;IACnE,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB"}
+{"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,YAAY,SAAS,SAAS,EAAE,QAAQ,GAAG,GAAG,CAC5E,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACvC;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAChC,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,CACd,SAAQ,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,cAAc,CAAC;IACnE;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;CACxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-react-hook-form",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "",
   "scripts": {
     "clean": "rimraf dist",