mobx-react-hook-form 2.1.1 → 2.1.3

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.
package/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export * from './mobx-form/index.js';
2
- export * from './hooks/index.js';
3
2
  //# sourceMappingURL=index.d.ts.map
package/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
package/index.js CHANGED
@@ -1,2 +1 @@
1
1
  export * from './mobx-form/index.js';
2
- export * from './hooks/index.js';
@@ -0,0 +1,28 @@
1
+ import { DeepMap, DeepPartial, FieldErrors, FieldValues, FormState } from 'react-hook-form';
2
+ type FormValues<TFieldValues extends FieldValues> = {
3
+ values: TFieldValues;
4
+ };
5
+ type MobxFormStateUpdate<TFieldValues extends FieldValues> = Omit<Partial<MobxFormState<TFieldValues>>, 'update'>;
6
+ export type MobxFormStateReadonly<TFieldValues extends FieldValues> = Readonly<Omit<MobxFormState<TFieldValues>, 'update'>>;
7
+ export declare class MobxFormState<TFieldValues extends FieldValues = FieldValues> implements FormState<TFieldValues>, FormValues<TFieldValues> {
8
+ values: TFieldValues;
9
+ isDirty: boolean;
10
+ isLoading: boolean;
11
+ isSubmitted: boolean;
12
+ isSubmitSuccessful: boolean;
13
+ isSubmitting: boolean;
14
+ isValidating: boolean;
15
+ isValid: boolean;
16
+ disabled: boolean;
17
+ submitCount: number;
18
+ defaultValues: Readonly<DeepPartial<TFieldValues>> | undefined;
19
+ dirtyFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
20
+ touchedFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
21
+ validatingFields: Partial<Readonly<DeepMap<DeepPartial<TFieldValues>, boolean>>>;
22
+ errors: FieldErrors<TFieldValues>;
23
+ isReady: boolean;
24
+ constructor(initialState?: MobxFormStateUpdate<TFieldValues>);
25
+ update({ values, errors, ...simpleProperties }: MobxFormStateUpdate<TFieldValues>): void;
26
+ }
27
+ export {};
28
+ //# sourceMappingURL=mobx-form-state.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,76 @@
1
+ /* eslint-disable @typescript-eslint/no-unused-vars */
2
+ /* eslint-disable @typescript-eslint/ban-ts-comment */
3
+ import { action, makeObservable, observable } from 'mobx';
4
+ export class MobxFormState {
5
+ values;
6
+ isDirty = false;
7
+ isLoading = false;
8
+ isSubmitted = false;
9
+ isSubmitSuccessful = false;
10
+ isSubmitting = false;
11
+ isValidating = false;
12
+ isValid = false;
13
+ disabled = false;
14
+ submitCount = 0;
15
+ defaultValues;
16
+ dirtyFields = {};
17
+ touchedFields = {};
18
+ validatingFields = {};
19
+ errors = {};
20
+ isReady = false;
21
+ constructor(initialState) {
22
+ if (initialState) {
23
+ Object.assign(this, initialState);
24
+ }
25
+ observable.deep(this, 'values');
26
+ observable.ref(this, 'isDirty');
27
+ observable.ref(this, 'isLoading');
28
+ observable.ref(this, 'isSubmitted');
29
+ observable.ref(this, 'isSubmitSuccessful');
30
+ observable.ref(this, 'isSubmitting');
31
+ observable.ref(this, 'isValidating');
32
+ observable.ref(this, 'isValid');
33
+ observable.ref(this, 'disabled');
34
+ observable.ref(this, 'submitCount');
35
+ observable.ref(this, 'isReady');
36
+ observable.deep(this, 'defaultValues');
37
+ observable.deep(this, 'dirtyFields');
38
+ observable.deep(this, 'touchedFields');
39
+ observable.deep(this, 'validatingFields');
40
+ observable.deep(this, 'errors');
41
+ action(this, 'update');
42
+ makeObservable(this);
43
+ }
44
+ update({ values, errors, ...simpleProperties }) {
45
+ Object.entries(simpleProperties).forEach(([key, value]) => {
46
+ if (value != null) {
47
+ // @ts-ignore
48
+ this[key] = value;
49
+ }
50
+ });
51
+ if (errors) {
52
+ const currentErrorsSet = new Set(Object.keys(this.errors));
53
+ const newErrors = Object.keys(errors);
54
+ for (const errorField of newErrors) {
55
+ if (currentErrorsSet.has(errorField)) {
56
+ currentErrorsSet.delete(errorField);
57
+ // @ts-ignore
58
+ Object.assign(this.errors[errorField], errors[errorField]);
59
+ }
60
+ else {
61
+ // @ts-ignore
62
+ this.errors[errorField] = errors[errorField];
63
+ }
64
+ }
65
+ currentErrorsSet.forEach((errorField) => {
66
+ // @ts-ignore
67
+ delete this.errors[errorField];
68
+ });
69
+ }
70
+ else {
71
+ this.errors = {};
72
+ }
73
+ // @ts-ignore
74
+ this.values = values ?? {};
75
+ }
76
+ }
@@ -1,49 +1,33 @@
1
- import { DeepPartial, FormState, SubmitErrorHandler, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
2
- import type { AnyObject, Maybe } from 'yummies/utils/types';
3
- import { ConnectedMobxForm, MobxFormParams } from './mobx-form.types.js';
4
- export declare class MobxForm<TFieldValues extends AnyObject, TContext = any, TFieldOutputValues extends AnyObject = TFieldValues> {
1
+ import { createFormControl, FieldValues, SubmitErrorHandler, SubmitHandler, UseFormProps } from 'react-hook-form';
2
+ import { MobxFormStateReadonly } from './mobx-form-state.js';
3
+ import { MobxFormParams } from './mobx-form.types.js';
4
+ export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> {
5
5
  private config;
6
6
  protected abortController: AbortController;
7
7
  /**
8
8
  * Real react-hook-form params
9
9
  * Needed to connect real react-hook-form to this mobx wrapper
10
10
  */
11
- params: UseFormProps<TFieldValues, TContext>;
12
- protected handleSubmit(...args: Parameters<SubmitHandler<TFieldOutputValues>>): void | Promise<void>;
11
+ params: UseFormProps<TFieldValues, TContext, TTransformedValues>;
12
+ protected handleSubmit(...args: Parameters<SubmitHandler<TTransformedValues>>): void | Promise<void>;
13
13
  protected handleSubmitFailed(...args: Parameters<SubmitErrorHandler<TFieldValues>>): void | Promise<void>;
14
14
  protected handleReset(): void;
15
15
  /**
16
16
  * Original react-hook-form form
17
17
  */
18
- form: Maybe<UseFormReturn<TFieldValues, TContext, TFieldOutputValues>>;
18
+ form: ReturnType<typeof createFormControl<TFieldValues, TContext, TTransformedValues>>;
19
19
  /**
20
20
  * form state received from form.formState
21
21
  */
22
- state: FormState<TFieldValues>;
22
+ private _state;
23
+ get state(): MobxFormStateReadonly<TFieldValues>;
23
24
  /**
24
25
  * Raw data received from form.getValues()
25
26
  */
26
- data: Maybe<DeepPartial<TFieldValues>>;
27
- protected isConnected: boolean;
28
- constructor(config: MobxFormParams<TFieldValues, TContext, TFieldOutputValues>);
29
- /**
30
- * Allows to modify real react-hook-form useForm() payload
31
- */
32
- setParams(params: UseFormProps<TFieldValues, TContext>): void;
33
- /**
34
- * Allows to modify real react-hook-form useForm() payload
35
- */
36
- 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>;
44
- /**
45
- * @deprecated use destroy();
46
- */
47
- dispose(): void;
27
+ get data(): TFieldValues;
28
+ constructor(config: MobxFormParams<TFieldValues, TContext, TTransformedValues>);
29
+ destroy(): void;
30
+ submit: (event?: any) => Promise<void>;
31
+ reset: () => void;
48
32
  }
49
33
  //# sourceMappingURL=mobx-form.d.ts.map
@@ -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,sBAAsB,CAAC;AAEzE,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;IA0ChE;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}
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,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"}
@@ -1,5 +1,8 @@
1
+ /* eslint-disable @typescript-eslint/ban-ts-comment */
1
2
  import { LinkedAbortController } from 'linked-abort-controller';
2
- import { action, makeObservable, observable, reaction } from 'mobx';
3
+ import { action, computed, makeObservable, observable } from 'mobx';
4
+ import { createFormControl, } from 'react-hook-form';
5
+ import { MobxFormState } from './mobx-form-state.js';
3
6
  export class MobxForm {
4
7
  config;
5
8
  abortController;
@@ -31,111 +34,66 @@ export class MobxForm {
31
34
  /**
32
35
  * form state received from form.formState
33
36
  */
34
- state;
37
+ _state;
38
+ get state() {
39
+ return this._state;
40
+ }
35
41
  /**
36
42
  * Raw data received from form.getValues()
37
43
  */
38
- data;
39
- isConnected = false;
44
+ get data() {
45
+ return this._state.values;
46
+ }
40
47
  constructor(config) {
41
48
  this.config = config;
49
+ this.params = config;
42
50
  this.abortController = new LinkedAbortController(config.abortSignal);
43
- // eslint-disable-next-line sonarjs/deprecation
44
- if (config.disposer) {
45
- // eslint-disable-next-line sonarjs/deprecation
46
- config.disposer.add(() => this.dispose());
47
- }
51
+ this.form = createFormControl(config);
52
+ this._state = new MobxFormState({
53
+ values: this.form.getValues(),
54
+ defaultValues: config.defaultValues || {},
55
+ });
56
+ this.params = config;
57
+ const subscription = this.form.subscribe({
58
+ formState: {
59
+ values: true,
60
+ errors: true,
61
+ isValid: true,
62
+ isDirty: true,
63
+ isValidating: true,
64
+ dirtyFields: true,
65
+ touchedFields: true,
66
+ validatingFields: true,
67
+ },
68
+ callback: (rawFormState) => {
69
+ this._state.update(rawFormState);
70
+ },
71
+ });
48
72
  this.abortController.signal.addEventListener('abort', () => {
73
+ subscription();
74
+ // @ts-ignore
49
75
  this.form = null;
76
+ // @ts-ignore
50
77
  this.data = null;
51
78
  });
52
- this.state = {
53
- disabled: false,
54
- errors: {},
55
- isDirty: false,
56
- isLoading: false,
57
- isSubmitSuccessful: false,
58
- isSubmitted: false,
59
- isValid: false,
60
- isValidating: false,
61
- isSubmitting: false,
62
- submitCount: 0,
63
- touchedFields: {},
64
- defaultValues: undefined,
65
- dirtyFields: {},
66
- validatingFields: {},
67
- };
68
- this.params = config;
69
- observable.deep(this, 'state');
70
- observable.deep(this, 'data');
79
+ computed.struct(this, 'data');
80
+ computed.struct(this, 'state');
71
81
  observable.ref(this, 'params');
82
+ observable.ref(this, 'form');
72
83
  action.bound(this, 'setParams');
73
84
  action.bound(this, 'updateParams');
74
85
  action.bound(this, 'syncForm');
75
86
  makeObservable(this);
76
- if (config.getParams) {
77
- reaction(config.getParams, (params) => {
78
- this.updateParams(params);
79
- }, {
80
- signal: this.abortController.signal,
81
- });
82
- }
83
- }
84
- /**
85
- * Allows to modify real react-hook-form useForm() payload
86
- */
87
- setParams(params) {
88
- this.params = params;
89
87
  }
90
- /**
91
- * Allows to modify real react-hook-form useForm() payload
92
- */
93
- updateParams(params) {
94
- this.setParams({ ...this.params, ...params });
95
- }
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(async (...args) => {
124
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
125
- // @ts-expect-error
126
- await this.handleSubmit(...args);
127
- await onValid(...args);
128
- }, async (...args) => {
129
- await this.handleSubmitFailed(...args);
130
- await onInvalid?.(...args);
131
- });
132
- },
133
- };
134
- }
135
- /**
136
- * @deprecated use destroy();
137
- */
138
- dispose() {
88
+ destroy() {
139
89
  this.abortController.abort();
140
90
  }
91
+ submit = async (event) => {
92
+ if (this.config.onSubmit) {
93
+ await this.form.handleSubmit(this.config.onSubmit, this.config.onSubmitFailed)(event);
94
+ }
95
+ };
96
+ reset = () => {
97
+ this.form.reset();
98
+ };
141
99
  }
@@ -1,16 +1,10 @@
1
- import type { IDisposer } from 'disposer-util';
2
- import { SubmitErrorHandler, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
3
- import { AnyObject } from 'yummies/utils/types';
1
+ import { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormProps } from 'react-hook-form';
4
2
  import type { MobxForm } from './mobx-form.js';
3
+ export type AnyMobxForm = MobxForm<any, any, any>;
5
4
  /**
6
5
  * Additional options for {@link MobxForm} constructor
7
6
  */
8
- export interface MobxFormParams<TFieldValues extends AnyObject, TContext = any, TFieldOutputValues extends AnyObject = TFieldValues> extends UseFormProps<TFieldValues, TContext> {
9
- /**
10
- * Disposer for mobx form
11
- * @deprecated use {abortSignal} instead
12
- */
13
- disposer?: IDisposer;
7
+ export interface MobxFormParams<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> extends UseFormProps<TFieldValues, TContext, TTransformedValues> {
14
8
  /**
15
9
  * Abort signal for mobx form
16
10
  */
@@ -18,7 +12,7 @@ export interface MobxFormParams<TFieldValues extends AnyObject, TContext = any,
18
12
  /**
19
13
  * Form submit handler
20
14
  */
21
- onSubmit?: SubmitHandler<TFieldOutputValues>;
15
+ onSubmit?: SubmitHandler<TTransformedValues>;
22
16
  /**
23
17
  * Form submit failed handler
24
18
  */
@@ -27,27 +21,8 @@ export interface MobxFormParams<TFieldValues extends AnyObject, TContext = any,
27
21
  * Form reset handler
28
22
  */
29
23
  onReset?: VoidFunction;
30
- /**
31
- * Dynamic change react-hook-form params, works as reaction
32
- */
33
- getParams?: () => Partial<UseFormProps<TFieldValues, TContext>>;
34
- }
35
- /**
36
- * Interface for a connected Mobx form.
37
- * Extends the properties of react-hook-form's UseFormReturn,
38
- * Adds custom form handlers.
39
- */
40
- export interface ConnectedMobxForm<TFieldValues extends AnyObject, TContext = any, TFieldOutputValues extends AnyObject = TFieldValues> extends UseFormReturn<TFieldValues, TContext, TFieldOutputValues> {
41
- /**
42
- * Handler to reset the form.
43
- */
44
- onReset: VoidFunction;
45
- /**
46
- * Handler to submit the form.
47
- */
48
- onSubmit: VoidFunction;
49
24
  }
50
- export type ExtractFormFieldValues<T extends MobxForm<any, any, any>> = Exclude<T['params']['values'], undefined | null>;
51
- export type ExtractFormContext<T extends MobxForm<any, any, any>> = Exclude<T['params']['context'], undefined | null>;
52
- export type ExtractFormFieldOutputValues<T extends MobxForm<any, any, any>> = T extends MobxForm<any, any, infer TFieldOutputValues> ? TFieldOutputValues : never;
25
+ export type ExtractFormFieldValues<T extends AnyMobxForm> = Exclude<T['params']['values'], undefined | null>;
26
+ export type ExtractFormContext<T extends AnyMobxForm> = Exclude<T['params']['context'], undefined | null>;
27
+ export type ExtractFormFieldOutputValues<T extends AnyMobxForm> = T extends MobxForm<any, any, infer TFieldOutputValues> ? TFieldOutputValues : never;
53
28
  //# sourceMappingURL=mobx-form.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,cAAc,CAC7B,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,EACd,kBAAkB,SAAS,SAAS,GAAG,YAAY,CACnD,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;CACjE;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAChC,YAAY,SAAS,SAAS,EAC9B,QAAQ,GAAG,GAAG,EACd,kBAAkB,SAAS,SAAS,GAAG,YAAY,CACnD,SAAQ,aAAa,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IACjE;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,OAAO,CAC7E,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EACrB,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,OAAO,CACzE,CAAC,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EACtB,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IACxE,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC,GAClD,kBAAkB,GAClB,KAAK,CAAC"}
1
+ {"version":3,"file":"mobx-form.types.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,YAAY,EACb,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,cAAc,CAC7B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,GAAG,EACd,kBAAkB,GAAG,YAAY,CACjC,SAAQ,YAAY,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC;IAChE;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CACjE,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EACrB,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAC7D,CAAC,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EACtB,SAAS,GAAG,IAAI,CACjB,CAAC;AAEF,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,WAAW,IAC5D,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC,GAClD,kBAAkB,GAClB,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,16 +1,24 @@
1
1
  {
2
2
  "name": "mobx-react-hook-form",
3
- "version": "2.1.1",
3
+ "version": "2.1.3",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "keywords": [],
7
7
  "author": "js2me",
8
8
  "license": "MIT",
9
+ "bugs": {
10
+ "url": "https://github.com/js2me/mobx-react-hook-form/issues"
11
+ },
12
+ "homepage": "https://github.com/js2me/mobx-react-hook-form",
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "git://github.com/js2me/mobx-react-hook-form"
16
+ },
9
17
  "peerDependencies": {
10
18
  "mobx": "^6.12.4",
11
19
  "mobx-react-lite": "^4.0.7",
12
20
  "react": "^18.3.1",
13
- "react-hook-form": "^7.55.0"
21
+ "react-hook-form": "^7.56.1"
14
22
  },
15
23
  "dependencies": {
16
24
  "disposer-util": "^2.0.0",
@@ -22,21 +30,12 @@
22
30
  "@types/lodash-es": "^4.17.12",
23
31
  "eslint": "^8.57.1",
24
32
  "js2me-eslint-config": "^1.0.7",
25
- "js2me-exports-post-build-script": "^2.0.18",
33
+ "js2me-exports-post-build-script": "^3.0.1",
34
+ "nodemon": "^3.1.10",
26
35
  "rimraf": "^6.0.1",
27
36
  "typescript": "^5.8.3"
28
37
  },
29
38
  "exports": {
30
- "./hooks": {
31
- "import": "./hooks/index.js",
32
- "default": "./hooks/index.js",
33
- "types": "./hooks/index.d.ts"
34
- },
35
- "./hooks/use-mobx-form": {
36
- "import": "./hooks/use-mobx-form.js",
37
- "default": "./hooks/use-mobx-form.js",
38
- "types": "./hooks/use-mobx-form.d.ts"
39
- },
40
39
  ".": {
41
40
  "import": "./index.js",
42
41
  "default": "./index.js",
@@ -47,6 +46,11 @@
47
46
  "default": "./mobx-form/index.js",
48
47
  "types": "./mobx-form/index.d.ts"
49
48
  },
49
+ "./mobx-form/mobx-form-state": {
50
+ "import": "./mobx-form/mobx-form-state.js",
51
+ "default": "./mobx-form/mobx-form-state.js",
52
+ "types": "./mobx-form/mobx-form-state.d.ts"
53
+ },
50
54
  "./mobx-form/mobx-form": {
51
55
  "import": "./mobx-form/mobx-form.js",
52
56
  "default": "./mobx-form/mobx-form.js",
@@ -64,8 +68,12 @@
64
68
  "check": "eslint . --fix",
65
69
  "prebuild": "npm run clean && npm run check",
66
70
  "build": "tsc && node ./post-build.mjs",
71
+ "build:watch": "npm run build && nodemon --delay 0.5 --watch src --ext ts,tsx --exec \"tsc && node ./post-build.mjs\"",
72
+ "pub": "PUBLISH=true pnpm run build",
73
+ "pub:next": "PUBLISH=true PUBLISH_TAG=next PUBLISH_FORCE=true pnpm run build",
67
74
  "pub:patch": "PUBLISH=true PUBLISH_VERSION=patch pnpm run build",
68
75
  "pub:minor": "PUBLISH=true PUBLISH_VERSION=minor pnpm run build",
69
- "pub:major": "PUBLISH=true PUBLISH_VERSION=major pnpm run build"
76
+ "pub:major": "PUBLISH=true PUBLISH_VERSION=major pnpm run build",
77
+ "pub:patch:next": "PUBLISH=true PUBLISH_VERSION=patch PUBLISH_TAG=next PUBLISH_FORCE=true pnpm run build"
70
78
  }
71
79
  }
package/hooks/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './use-mobx-form.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
package/hooks/index.js DELETED
@@ -1 +0,0 @@
1
- export * from './use-mobx-form.js';
@@ -1,3 +0,0 @@
1
- import { ConnectedMobxForm, ExtractFormContext, ExtractFormFieldValues, MobxForm } from '../mobx-form/index.js';
2
- export declare const useMobxForm: <T extends MobxForm<any, any, any>>(mobxForm: T) => ConnectedMobxForm<ExtractFormFieldValues<T>, ExtractFormContext<T>>;
3
- //# sourceMappingURL=use-mobx-form.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-mobx-form.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobx-form.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAE/B,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAC3D,UAAU,CAAC,KACV,iBAAiB,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAEzB,CAAC"}
@@ -1,4 +0,0 @@
1
- import { useForm } from 'react-hook-form';
2
- export const useMobxForm = (mobxForm) =>
3
- // @ts-expect-error ts(2445)
4
- mobxForm.connect(useForm(mobxForm.params));