mobx-react-hook-form 2.0.12 → 2.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/mobx-form/mobx-form.d.ts +8 -13
  2. package/mobx-form/mobx-form.d.ts.map +1 -1
  3. package/mobx-form/mobx-form.js +56 -66
  4. package/package.json +4 -3
package/mobx-form/mobx-form.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { DeepPartial, FormState, SubmitErrorHandler, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
1
+ import { DeepPartial, FormState, SubmitErrorHandler, SubmitHandler, UseFormProps } from 'react-hook-form';
2
2
  import type { AnyObject, Maybe } from 'yummies/utils/types';
3
- import { ConnectedMobxForm, MobxFormParams } from './mobx-form.types';
3
+ import { MobxFormParams } from './mobx-form.types';
4
4
  export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TFieldOutputValues extends AnyObject = TFieldValues> {
5
5
  private config;
6
6
  protected abortController: AbortController;
@@ -9,13 +9,11 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
9
9
  * Needed to connect real react-hook-form to this mobx wrapper
10
10
  */
11
11
  params: UseFormProps<TFieldValues, TContext>;
12
- protected handleSubmit(...args: Parameters<SubmitHandler<TFieldOutputValues>>): void | Promise<void>;
13
- protected handleSubmitFailed(...args: Parameters<SubmitErrorHandler<TFieldValues>>): void | Promise<void>;
14
12
  protected handleReset(): void;
15
13
  /**
16
14
  * Original react-hook-form form
17
15
  */
18
- form: Maybe<UseFormReturn<TFieldValues, TContext, TFieldOutputValues>>;
16
+ private instance;
19
17
  /**
20
18
  * form state received from form.formState
21
19
  */
@@ -24,9 +22,12 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
24
22
  * Raw data received from form.getValues()
25
23
  */
26
24
  data: Maybe<DeepPartial<TFieldValues>>;
25
+ onSubmit: (event?: any) => Promise<void>;
27
26
  protected isConnected: boolean;
28
- private stateKeys;
29
27
  constructor(config: MobxFormParams<TFieldValues, TContext, TFieldOutputValues>);
28
+ protected handleSubmit(...args: Parameters<SubmitHandler<TFieldOutputValues>>): void | Promise<void>;
29
+ protected handleSubmitFailed(...args: Parameters<SubmitErrorHandler<TFieldValues>>): void | Promise<void>;
30
+ protected syncForm(formState: Partial<FormState<TFieldValues>>, data?: DeepPartial<TFieldValues> | TFieldValues): void;
30
31
  /**
31
32
  * Allows to modify real react-hook-form useForm() payload
32
33
  */
@@ -35,13 +36,7 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
35
36
  * Allows to modify real react-hook-form useForm() payload
36
37
  */
37
38
  updateParams(params: Partial<UseFormProps<TFieldValues, TContext>>): void;
38
- protected syncForm(formResult: UseFormReturn<TFieldValues, TContext, TFieldOutputValues>, data?: DeepPartial<TFieldValues>): void;
39
- /**
40
- * Needed to connect real react-hook-form to this mobx wrapper
41
- *
42
- * This is used in useMobxForm
43
- */
44
- protected connect(formResult: UseFormReturn<TFieldValues, TContext, TFieldOutputValues>): ConnectedMobxForm<TFieldValues, TContext, TFieldOutputValues>;
39
+ destroy(): void;
45
40
  /**
46
41
  * @deprecated use destroy();
47
42
  */
package/mobx-form/mobx-form.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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;IAmDjD,OAAO,CAAC,MAAM;IAjDhB,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;IAE9B,OAAO,CAAC,SAAS,CAAW;gBAGlB,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IA4D5E;;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;IAWjE;;;;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"}
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,EAEb,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;IAqCjD,OAAO,CAAC,MAAM;IAnChB,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,OAAO,CAAC,QAAQ,CAEd;IAEF;;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;IA4E5E,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;IAajD;;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"}
package/mobx-form/mobx-form.js CHANGED
@@ -1,5 +1,16 @@
1
1
  import { LinkedAbortController } from 'linked-abort-controller';
2
- import { action, makeObservable, observable, reaction } from 'mobx';
2
+ import { action, makeObservable, observable, reaction, runInAction, } from 'mobx';
3
+ import { createFormControl, } from 'react-hook-form';
4
+ const dependsOn = {
5
+ isDirty: true,
6
+ isLoading: true,
7
+ isValidating: true,
8
+ isValid: true,
9
+ dirtyFields: true,
10
+ touchedFields: true,
11
+ validatingFields: true,
12
+ errors: true,
13
+ };
3
14
  export class MobxForm {
4
15
  config;
5
16
  abortController;
@@ -8,18 +19,6 @@ export class MobxForm {
8
19
  * Needed to connect real react-hook-form to this mobx wrapper
9
20
  */
10
21
  params;
11
- handleSubmit(
12
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
13
- ...args) {
14
- this.config.onSubmit?.(...args);
15
- // used to override
16
- }
17
- handleSubmitFailed(
18
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
19
- ...args) {
20
- this.config.onSubmitFailed?.(...args);
21
- // used to override
22
- }
23
22
  handleReset() {
24
23
  this.config.onReset?.();
25
24
  // used to override
@@ -27,7 +26,7 @@ export class MobxForm {
27
26
  /**
28
27
  * Original react-hook-form form
29
28
  */
30
- form;
29
+ instance;
31
30
  /**
32
31
  * form state received from form.formState
33
32
  */
@@ -36,8 +35,8 @@ export class MobxForm {
36
35
  * Raw data received from form.getValues()
37
36
  */
38
37
  data;
38
+ onSubmit;
39
39
  isConnected = false;
40
- stateKeys;
41
40
  constructor(config) {
42
41
  this.config = config;
43
42
  this.abortController = new LinkedAbortController(config.abortSignal);
@@ -47,7 +46,7 @@ export class MobxForm {
47
46
  config.disposer.add(() => this.dispose());
48
47
  }
49
48
  this.abortController.signal.addEventListener('abort', () => {
50
- this.form = null;
49
+ this.instance = null;
51
50
  this.data = null;
52
51
  });
53
52
  this.state = {
@@ -66,16 +65,27 @@ export class MobxForm {
66
65
  dirtyFields: {},
67
66
  validatingFields: {},
68
67
  };
69
- this.stateKeys = Object.keys(this.state);
70
68
  this.params = config;
71
- this.stateKeys.forEach((key) => {
72
- observable.deep(this.state, key);
73
- });
69
+ observable.deep(this, 'state');
74
70
  observable.deep(this, 'data');
75
71
  observable.ref(this, 'params');
72
+ observable.ref(this, 'instance');
76
73
  action.bound(this, 'setParams');
77
74
  action.bound(this, 'updateParams');
78
75
  action.bound(this, 'syncForm');
76
+ this.instance = createFormControl(config);
77
+ this.onSubmit = this.instance?.handleSubmit(this.handleSubmit.bind(this), this.handleSubmitFailed.bind(this));
78
+ /**
79
+ *
80
+ *
81
+ * Subscribes
82
+ *
83
+ *
84
+ */
85
+ this.instance.subscribe({
86
+ formState: dependsOn,
87
+ callback: (formState) => this.syncForm(formState, formState.values),
88
+ });
79
89
  makeObservable(this);
80
90
  if (config.getParams) {
81
91
  reaction(config.getParams, (params) => {
@@ -85,6 +95,29 @@ export class MobxForm {
85
95
  });
86
96
  }
87
97
  }
98
+ handleSubmit(
99
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
100
+ ...args) {
101
+ this.config.onSubmit?.(...args);
102
+ // used to override
103
+ }
104
+ handleSubmitFailed(
105
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
106
+ ...args) {
107
+ this.config.onSubmitFailed?.(...args);
108
+ // used to override
109
+ }
110
+ syncForm(formState, data) {
111
+ runInAction(() => {
112
+ Object.getOwnPropertyNames(formState).forEach((key) => {
113
+ // @ts-expect-error kkkk
114
+ this.state[key] = formState[key];
115
+ });
116
+ if (this.data) {
117
+ this.data = data;
118
+ }
119
+ });
120
+ }
88
121
  /**
89
122
  * Allows to modify real react-hook-form useForm() payload
90
123
  */
@@ -97,56 +130,13 @@ export class MobxForm {
97
130
  updateParams(params) {
98
131
  this.setParams({ ...this.params, ...params });
99
132
  }
100
- syncForm(formResult, data = formResult.getValues()) {
101
- this.form = formResult;
102
- this.stateKeys.forEach((key) => {
103
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
104
- // @ts-expect-error
105
- this.state[key] = formResult.formState[key];
106
- });
107
- this.data = data;
108
- }
109
- /**
110
- * Needed to connect real react-hook-form to this mobx wrapper
111
- *
112
- * This is used in useMobxForm
113
- */
114
- connect(formResult) {
115
- if (!this.isConnected) {
116
- this.isConnected = true;
117
- this.syncForm(formResult);
118
- const formWatchSubscription = formResult.watch((values) => {
119
- this.syncForm(formResult, values);
120
- });
121
- this.abortController.signal.addEventListener('abort', formWatchSubscription.unsubscribe);
122
- }
123
- return {
124
- ...formResult,
125
- onReset: () => this.handleReset(),
126
- onSubmit: formResult.handleSubmit(
127
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
128
- // @ts-expect-error
129
- (...args) => this.handleSubmit(...args), (...args) => this.handleSubmitFailed(...args)),
130
- handleSubmit: (onValid, onInvalid) => {
131
- return formResult.handleSubmit(
132
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
133
- // @ts-expect-error
134
- async (...args) => {
135
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
136
- // @ts-expect-error
137
- await this.handleSubmit(...args);
138
- await onValid(...args);
139
- }, async (...args) => {
140
- await this.handleSubmitFailed(...args);
141
- await onInvalid?.(...args);
142
- });
143
- },
144
- };
133
+ destroy() {
134
+ this.abortController.abort();
145
135
  }
146
136
  /**
147
137
  * @deprecated use destroy();
148
138
  */
149
139
  dispose() {
150
- this.abortController.abort();
140
+ this.destroy();
151
141
  }
152
142
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mobx-react-hook-form",
3
- "version": "2.0.12",
3
+ "version": "2.0.14",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "js2me",
@@ -8,10 +8,10 @@
8
8
  "peerDependencies": {
9
9
  "mobx": "^6.12.4",
10
10
  "mobx-react-lite": "^4.0.7",
11
- "react": "^18.3.1",
12
- "react-hook-form": "^7.53.0"
11
+ "react": "^18.3.1"
13
12
  },
14
13
  "dependencies": {
14
+ "react-hook-form": "^7.55.0-next.3",
15
15
  "disposer-util": "^1.0.11",
16
16
  "linked-abort-controller": "^1.0.1",
17
17
  "lodash-es": "^4.17.21",
@@ -23,6 +23,7 @@
23
23
  "js2me-eslint-config": "1.0.4",
24
24
  "js2me-exports-post-build-script": "2.0.10",
25
25
  "rimraf": "6.0.1",
26
+ "prettier": "3.3.3",
26
27
  "typescript": "5.6.2"
27
28
  },
28
29
  "exports": {