mobx-react-hook-form 2.1.2 → 2.1.3

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,76 @@
+/* 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 ?? {};
+    }
+}

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

@@ -1,5 +1,5 @@
-import { createFormControl, FieldValues, FormState, SubmitErrorHandler, SubmitHandler, UseFormProps } from 'react-hook-form';
-import { Maybe } from 'yummies/utils/types';
+import { createFormControl, FieldValues, SubmitErrorHandler, SubmitHandler, UseFormProps } from 'react-hook-form';
+import { MobxFormStateReadonly } from './mobx-form-state.js';
 import { MobxFormParams } from './mobx-form.types.js';
 export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> {
     private config;
@@ -19,13 +19,12 @@ export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TC
     /**
      * form state received from form.formState
      */
-    state: Maybe<Partial<FormState<TFieldValues>> & {
-        values: TFieldValues;
-    }>;
+    private _state;
+    get state(): MobxFormStateReadonly<TFieldValues>;
     /**
      * Raw data received from form.getValues()
      */
-    data: TFieldValues;
+    get data(): TFieldValues;
     constructor(config: MobxFormParams<TFieldValues, TContext, TTransformedValues>);
     destroy(): void;
     submit: (event?: any) => Promise<void>;

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,SAAS,EACT,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,qBAAa,QAAQ,CACnB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY;IAqD/B,OAAO,CAAC,MAAM;IAnDhB,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,KAAK,EAAE,KAAK,CACV,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,GAAG;QACjC,MAAM,EAAE,YAAY,CAAC;KACtB,CACF,CAAC;IAEF;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;gBAGT,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAgD5E,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":"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"}

package/mobx-form/mobx-form.js

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { LinkedAbortController } from 'linked-abort-controller';
-import { action, makeObservable, observable, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { createFormControl, } from 'react-hook-form';
+import { MobxFormState } from './mobx-form-state.js';
 export class MobxForm {
     config;
     abortController;
@@ -33,30 +34,39 @@ export class MobxForm {
     /**
      * form state received from form.formState
      */
-    state;
+    _state;
+    get state() {
+        return this._state;
+    }
     /**
      * Raw data received from form.getValues()
      */
-    data;
+    get data() {
+        return this._state.values;
+    }
     constructor(config) {
         this.config = config;
         this.params = config;
         this.abortController = new LinkedAbortController(config.abortSignal);
         this.form = createFormControl(config);
-        this.data = this.form.getValues();
-        this.state = null;
+        this._state = new MobxFormState({
+            values: this.form.getValues(),
+            defaultValues: config.defaultValues || {},
+        });
         this.params = config;
         const subscription = this.form.subscribe({
+            formState: {
+                values: true,
+                errors: true,
+                isValid: true,
+                isDirty: true,
+                isValidating: true,
+                dirtyFields: true,
+                touchedFields: true,
+                validatingFields: true,
+            },
             callback: (rawFormState) => {
-                runInAction(() => {
-                    if (this.state) {
-                        Object.assign(this.state, rawFormState);
-                    }
-                    else {
-                        this.state = rawFormState;
-                    }
-                    Object.assign(this.data, rawFormState.values);
-                });
+                this._state.update(rawFormState);
             },
         });
         this.abortController.signal.addEventListener('abort', () => {
@@ -65,11 +75,9 @@ export class MobxForm {
             this.form = null;
             // @ts-ignore
             this.data = null;
-            // @ts-ignore
-            this.state = null;
         });
-        observable.deep(this, 'state');
-        observable.deep(this, 'data');
+        computed.struct(this, 'data');
+        computed.struct(this, 'state');
         observable.ref(this, 'params');
         observable.ref(this, 'form');
         action.bound(this, 'setParams');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-react-hook-form",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "",
   "type": "module",
   "keywords": [],
@@ -31,6 +31,7 @@
     "eslint": "^8.57.1",
     "js2me-eslint-config": "^1.0.7",
     "js2me-exports-post-build-script": "^3.0.1",
+    "nodemon": "^3.1.10",
     "rimraf": "^6.0.1",
     "typescript": "^5.8.3"
   },
@@ -45,6 +46,11 @@
       "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",
@@ -62,6 +68,7 @@
     "check": "eslint . --fix",
     "prebuild": "npm run clean && npm run check",
     "build": "tsc && node ./post-build.mjs",
+    "build:watch": "npm run build && nodemon --delay 0.5 --watch src --ext ts,tsx --exec \"tsc && node ./post-build.mjs\"",
     "pub": "PUBLISH=true pnpm run build",
     "pub:next": "PUBLISH=true PUBLISH_TAG=next PUBLISH_FORCE=true pnpm run build",
     "pub:patch": "PUBLISH=true PUBLISH_VERSION=patch pnpm run build",