mobx-react-hook-form 2.0.13 → 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 -12
  2. package/mobx-form/mobx-form.d.ts.map +1 -1
  3. package/mobx-form/mobx-form.js +55 -57
  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,8 +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
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;
29
31
  /**
30
32
  * Allows to modify real react-hook-form useForm() payload
31
33
  */
@@ -34,13 +36,7 @@ export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TF
34
36
  * Allows to modify real react-hook-form useForm() payload
35
37
  */
36
38
  updateParams(params: Partial<UseFormProps<TFieldValues, TContext>>): void;
37
- protected syncForm(formResult: UseFormReturn<TFieldValues, TContext, TFieldOutputValues>, data?: DeepPartial<TFieldValues>): void;
38
- /**
39
- * Needed to connect real react-hook-form to this mobx wrapper
40
- *
41
- * This is used in useMobxForm
42
- */
43
- protected connect(formResult: UseFormReturn<TFieldValues, TContext, TFieldOutputValues>): ConnectedMobxForm<TFieldValues, TContext, TFieldOutputValues>;
39
+ destroy(): void;
44
40
  /**
45
41
  * @deprecated use destroy();
46
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;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"}
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,6 +35,7 @@ export class MobxForm {
36
35
  * Raw data received from form.getValues()
37
36
  */
38
37
  data;
38
+ onSubmit;
39
39
  isConnected = false;
40
40
  constructor(config) {
41
41
  this.config = config;
@@ -46,7 +46,7 @@ export class MobxForm {
46
46
  config.disposer.add(() => this.dispose());
47
47
  }
48
48
  this.abortController.signal.addEventListener('abort', () => {
49
- this.form = null;
49
+ this.instance = null;
50
50
  this.data = null;
51
51
  });
52
52
  this.state = {
@@ -69,9 +69,23 @@ export class MobxForm {
69
69
  observable.deep(this, 'state');
70
70
  observable.deep(this, 'data');
71
71
  observable.ref(this, 'params');
72
+ observable.ref(this, 'instance');
72
73
  action.bound(this, 'setParams');
73
74
  action.bound(this, 'updateParams');
74
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
+ });
75
89
  makeObservable(this);
76
90
  if (config.getParams) {
77
91
  reaction(config.getParams, (params) => {
@@ -81,6 +95,29 @@ export class MobxForm {
81
95
  });
82
96
  }
83
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
+ }
84
121
  /**
85
122
  * Allows to modify real react-hook-form useForm() payload
86
123
  */
@@ -93,52 +130,13 @@ export class MobxForm {
93
130
  updateParams(params) {
94
131
  this.setParams({ ...this.params, ...params });
95
132
  }
96
- syncForm(formResult, data = formResult.getValues()) {
97
- this.form = formResult;
98
- this.state = formResult.formState;
99
- this.data = data;
100
- }
101
- /**
102
- * Needed to connect real react-hook-form to this mobx wrapper
103
- *
104
- * This is used in useMobxForm
105
- */
106
- connect(formResult) {
107
- if (!this.isConnected) {
108
- this.isConnected = true;
109
- this.syncForm(formResult);
110
- const formWatchSubscription = formResult.watch((values) => {
111
- this.syncForm(formResult, values);
112
- });
113
- this.abortController.signal.addEventListener('abort', formWatchSubscription.unsubscribe);
114
- }
115
- return {
116
- ...formResult,
117
- onReset: () => this.handleReset(),
118
- onSubmit: formResult.handleSubmit(
119
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
120
- // @ts-expect-error
121
- (...args) => this.handleSubmit(...args), (...args) => this.handleSubmitFailed(...args)),
122
- handleSubmit: (onValid, onInvalid) => {
123
- return formResult.handleSubmit(
124
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
125
- // @ts-expect-error
126
- async (...args) => {
127
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
128
- // @ts-expect-error
129
- await this.handleSubmit(...args);
130
- await onValid(...args);
131
- }, async (...args) => {
132
- await this.handleSubmitFailed(...args);
133
- await onInvalid?.(...args);
134
- });
135
- },
136
- };
133
+ destroy() {
134
+ this.abortController.abort();
137
135
  }
138
136
  /**
139
137
  * @deprecated use destroy();
140
138
  */
141
139
  dispose() {
142
- this.abortController.abort();
140
+ this.destroy();
143
141
  }
144
142
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mobx-react-hook-form",
3
- "version": "2.0.13",
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": {