@conform-to/react 1.0.0-rc.1 → 1.0.0

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/README CHANGED
@@ -8,7 +8,7 @@
8
8
  ╚══════╝ ╚═════╝ ╚═╝ ╚══╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝
9
9
 
10
10
 
11
- Version 1.0.0-rc.0 / License MIT / Copyright (c) 2024 Edmund Hung
11
+ Version 1.0.0-rc.1 / License MIT / Copyright (c) 2024 Edmund Hung
12
12
 
13
13
  A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
14
14
 
package/context.d.ts CHANGED
@@ -27,9 +27,8 @@ export type FormMetadata<Schema extends Record<string, unknown> = Record<string,
27
27
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
28
28
  noValidate: boolean;
29
29
  };
30
- export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & {
30
+ export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & Constraint & {
31
31
  formId: FormId<FormSchema, FormError>;
32
- constraint?: Constraint;
33
32
  getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
34
33
  [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormSchema, FormError>;
35
34
  };
package/context.js CHANGED
@@ -74,9 +74,15 @@ function getMetadata(formId, state, subjectRef) {
74
74
  name,
75
75
  errorId: "".concat(id, "-error"),
76
76
  descriptionId: "".concat(id, "-description"),
77
- initialValue: state.initialValue[name],
78
- value: state.value[name],
79
- errors: state.error[name],
77
+ get initialValue() {
78
+ return state.initialValue[name];
79
+ },
80
+ get value() {
81
+ return state.value[name];
82
+ },
83
+ get errors() {
84
+ return state.error[name];
85
+ },
80
86
  get key() {
81
87
  return state.key[name];
82
88
  },
@@ -134,11 +140,19 @@ function getFieldMetadata(formId, state, subjectRef) {
134
140
  var metadata = getMetadata(formId, state, subjectRef, name);
135
141
  return new Proxy({}, {
136
142
  get(_, key, receiver) {
143
+ var _state$constraint$nam;
137
144
  switch (key) {
138
145
  case 'formId':
139
146
  return formId;
140
- case 'constraint':
141
- return state.constraint[name];
147
+ case 'required':
148
+ case 'minLength':
149
+ case 'maxLength':
150
+ case 'min':
151
+ case 'max':
152
+ case 'pattern':
153
+ case 'step':
154
+ case 'multiple':
155
+ return (_state$constraint$nam = state.constraint[name]) === null || _state$constraint$nam === void 0 ? void 0 : _state$constraint$nam[key];
142
156
  case 'getFieldList':
143
157
  {
144
158
  return () => {
package/context.mjs CHANGED
@@ -70,9 +70,15 @@ function getMetadata(formId, state, subjectRef) {
70
70
  name,
71
71
  errorId: "".concat(id, "-error"),
72
72
  descriptionId: "".concat(id, "-description"),
73
- initialValue: state.initialValue[name],
74
- value: state.value[name],
75
- errors: state.error[name],
73
+ get initialValue() {
74
+ return state.initialValue[name];
75
+ },
76
+ get value() {
77
+ return state.value[name];
78
+ },
79
+ get errors() {
80
+ return state.error[name];
81
+ },
76
82
  get key() {
77
83
  return state.key[name];
78
84
  },
@@ -130,11 +136,19 @@ function getFieldMetadata(formId, state, subjectRef) {
130
136
  var metadata = getMetadata(formId, state, subjectRef, name);
131
137
  return new Proxy({}, {
132
138
  get(_, key, receiver) {
139
+ var _state$constraint$nam;
133
140
  switch (key) {
134
141
  case 'formId':
135
142
  return formId;
136
- case 'constraint':
137
- return state.constraint[name];
143
+ case 'required':
144
+ case 'minLength':
145
+ case 'maxLength':
146
+ case 'min':
147
+ case 'max':
148
+ case 'pattern':
149
+ case 'step':
150
+ case 'multiple':
151
+ return (_state$constraint$nam = state.constraint[name]) === null || _state$constraint$nam === void 0 ? void 0 : _state$constraint$nam[key];
138
152
  case 'getFieldList':
139
153
  {
140
154
  return () => {
package/helpers.js CHANGED
@@ -72,10 +72,9 @@ function getFieldsetProps(metadata, options) {
72
72
  * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
73
73
  */
74
74
  function getFormControlProps(metadata, options) {
75
- var _metadata$constraint;
76
75
  return simplify(_rollupPluginBabelHelpers.objectSpread2({
77
76
  key: metadata.key,
78
- required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
77
+ required: metadata.required || undefined
79
78
  }, getFieldsetProps(metadata, options)));
80
79
  }
81
80
 
@@ -100,16 +99,15 @@ function getFormControlProps(metadata, options) {
100
99
  * ```
101
100
  */
102
101
  function getInputProps(metadata, options) {
103
- var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
104
102
  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
105
103
  type: options.type,
106
- minLength: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.minLength,
107
- maxLength: (_metadata$constraint3 = metadata.constraint) === null || _metadata$constraint3 === void 0 ? void 0 : _metadata$constraint3.maxLength,
108
- min: (_metadata$constraint4 = metadata.constraint) === null || _metadata$constraint4 === void 0 ? void 0 : _metadata$constraint4.min,
109
- max: (_metadata$constraint5 = metadata.constraint) === null || _metadata$constraint5 === void 0 ? void 0 : _metadata$constraint5.max,
110
- step: (_metadata$constraint6 = metadata.constraint) === null || _metadata$constraint6 === void 0 ? void 0 : _metadata$constraint6.step,
111
- pattern: (_metadata$constraint7 = metadata.constraint) === null || _metadata$constraint7 === void 0 ? void 0 : _metadata$constraint7.pattern,
112
- multiple: (_metadata$constraint8 = metadata.constraint) === null || _metadata$constraint8 === void 0 ? void 0 : _metadata$constraint8.multiple
104
+ minLength: metadata.minLength,
105
+ maxLength: metadata.maxLength,
106
+ min: metadata.min,
107
+ max: metadata.max,
108
+ step: metadata.step,
109
+ pattern: metadata.pattern,
110
+ multiple: metadata.multiple
113
111
  });
114
112
  if (typeof options.value === 'undefined' || options.value) {
115
113
  if (options.type === 'checkbox' || options.type === 'radio') {
@@ -138,10 +136,9 @@ function getInputProps(metadata, options) {
138
136
  * ```
139
137
  */
140
138
  function getSelectProps(metadata) {
141
- var _metadata$constraint9;
142
139
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
143
140
  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
144
- multiple: (_metadata$constraint9 = metadata.constraint) === null || _metadata$constraint9 === void 0 ? void 0 : _metadata$constraint9.multiple
141
+ multiple: metadata.multiple
145
142
  });
146
143
  if (typeof options.value === 'undefined' || options.value) {
147
144
  props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : metadata.initialValue;
@@ -165,11 +162,10 @@ function getSelectProps(metadata) {
165
162
  * ```
166
163
  */
167
164
  function getTextareaProps(metadata) {
168
- var _metadata$constraint10, _metadata$constraint11;
169
165
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
170
166
  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
171
- minLength: (_metadata$constraint10 = metadata.constraint) === null || _metadata$constraint10 === void 0 ? void 0 : _metadata$constraint10.minLength,
172
- maxLength: (_metadata$constraint11 = metadata.constraint) === null || _metadata$constraint11 === void 0 ? void 0 : _metadata$constraint11.maxLength
167
+ minLength: metadata.minLength,
168
+ maxLength: metadata.maxLength
173
169
  });
174
170
  if (typeof options.value === 'undefined' || options.value) {
175
171
  props.defaultValue = metadata.initialValue;
@@ -199,7 +195,7 @@ function getTextareaProps(metadata) {
199
195
  */
200
196
  function getCollectionProps(metadata, options) {
201
197
  return options.options.map(value => {
202
- var _metadata$key, _metadata$constraint12;
198
+ var _metadata$key;
203
199
  return simplify(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
204
200
  key: "".concat((_metadata$key = metadata.key) !== null && _metadata$key !== void 0 ? _metadata$key : '').concat(value),
205
201
  id: "".concat(metadata.id, "-").concat(value),
@@ -209,7 +205,7 @@ function getCollectionProps(metadata, options) {
209
205
  // The required attribute doesn't make sense for checkbox group
210
206
  // As it would require all checkboxes to be checked instead of at least one
211
207
  // It is overriden with `undefiend` so it could be cleaned up properly
212
- required: options.type === 'checkbox' ? undefined : (_metadata$constraint12 = metadata.constraint) === null || _metadata$constraint12 === void 0 ? void 0 : _metadata$constraint12.required
208
+ required: options.type === 'checkbox' ? undefined : metadata.required
213
209
  }));
214
210
  });
215
211
  }
package/helpers.mjs CHANGED
@@ -68,10 +68,9 @@ function getFieldsetProps(metadata, options) {
68
68
  * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
69
69
  */
70
70
  function getFormControlProps(metadata, options) {
71
- var _metadata$constraint;
72
71
  return simplify(_objectSpread2({
73
72
  key: metadata.key,
74
- required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
73
+ required: metadata.required || undefined
75
74
  }, getFieldsetProps(metadata, options)));
76
75
  }
77
76
 
@@ -96,16 +95,15 @@ function getFormControlProps(metadata, options) {
96
95
  * ```
97
96
  */
98
97
  function getInputProps(metadata, options) {
99
- var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
100
98
  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
101
99
  type: options.type,
102
- minLength: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.minLength,
103
- maxLength: (_metadata$constraint3 = metadata.constraint) === null || _metadata$constraint3 === void 0 ? void 0 : _metadata$constraint3.maxLength,
104
- min: (_metadata$constraint4 = metadata.constraint) === null || _metadata$constraint4 === void 0 ? void 0 : _metadata$constraint4.min,
105
- max: (_metadata$constraint5 = metadata.constraint) === null || _metadata$constraint5 === void 0 ? void 0 : _metadata$constraint5.max,
106
- step: (_metadata$constraint6 = metadata.constraint) === null || _metadata$constraint6 === void 0 ? void 0 : _metadata$constraint6.step,
107
- pattern: (_metadata$constraint7 = metadata.constraint) === null || _metadata$constraint7 === void 0 ? void 0 : _metadata$constraint7.pattern,
108
- multiple: (_metadata$constraint8 = metadata.constraint) === null || _metadata$constraint8 === void 0 ? void 0 : _metadata$constraint8.multiple
100
+ minLength: metadata.minLength,
101
+ maxLength: metadata.maxLength,
102
+ min: metadata.min,
103
+ max: metadata.max,
104
+ step: metadata.step,
105
+ pattern: metadata.pattern,
106
+ multiple: metadata.multiple
109
107
  });
110
108
  if (typeof options.value === 'undefined' || options.value) {
111
109
  if (options.type === 'checkbox' || options.type === 'radio') {
@@ -134,10 +132,9 @@ function getInputProps(metadata, options) {
134
132
  * ```
135
133
  */
136
134
  function getSelectProps(metadata) {
137
- var _metadata$constraint9;
138
135
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
139
136
  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
140
- multiple: (_metadata$constraint9 = metadata.constraint) === null || _metadata$constraint9 === void 0 ? void 0 : _metadata$constraint9.multiple
137
+ multiple: metadata.multiple
141
138
  });
142
139
  if (typeof options.value === 'undefined' || options.value) {
143
140
  props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : metadata.initialValue;
@@ -161,11 +158,10 @@ function getSelectProps(metadata) {
161
158
  * ```
162
159
  */
163
160
  function getTextareaProps(metadata) {
164
- var _metadata$constraint10, _metadata$constraint11;
165
161
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
166
162
  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
167
- minLength: (_metadata$constraint10 = metadata.constraint) === null || _metadata$constraint10 === void 0 ? void 0 : _metadata$constraint10.minLength,
168
- maxLength: (_metadata$constraint11 = metadata.constraint) === null || _metadata$constraint11 === void 0 ? void 0 : _metadata$constraint11.maxLength
163
+ minLength: metadata.minLength,
164
+ maxLength: metadata.maxLength
169
165
  });
170
166
  if (typeof options.value === 'undefined' || options.value) {
171
167
  props.defaultValue = metadata.initialValue;
@@ -195,7 +191,7 @@ function getTextareaProps(metadata) {
195
191
  */
196
192
  function getCollectionProps(metadata, options) {
197
193
  return options.options.map(value => {
198
- var _metadata$key, _metadata$constraint12;
194
+ var _metadata$key;
199
195
  return simplify(_objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
200
196
  key: "".concat((_metadata$key = metadata.key) !== null && _metadata$key !== void 0 ? _metadata$key : '').concat(value),
201
197
  id: "".concat(metadata.id, "-").concat(value),
@@ -205,7 +201,7 @@ function getCollectionProps(metadata, options) {
205
201
  // The required attribute doesn't make sense for checkbox group
206
202
  // As it would require all checkboxes to be checked instead of at least one
207
203
  // It is overriden with `undefiend` so it could be cleaned up properly
208
- required: options.type === 'checkbox' ? undefined : (_metadata$constraint12 = metadata.constraint) === null || _metadata$constraint12 === void 0 ? void 0 : _metadata$constraint12.required
204
+ required: options.type === 'checkbox' ? undefined : metadata.required
209
205
  }));
210
206
  });
211
207
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Conform view adapter for react",
4
4
  "homepage": "https://conform.guide",
5
5
  "license": "MIT",
6
- "version": "1.0.0-rc.1",
6
+ "version": "1.0.0",
7
7
  "main": "index.js",
8
8
  "module": "index.mjs",
9
9
  "types": "index.d.ts",
@@ -30,7 +30,7 @@
30
30
  "url": "https://github.com/edmundhung/conform/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@conform-to/dom": "1.0.0-rc.1"
33
+ "@conform-to/dom": "1.0.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@types/react": "^18.2.43",