@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 +1 -1
- package/context.d.ts +1 -2
- package/context.js +19 -5
- package/context.mjs +19 -5
- package/helpers.js +13 -17
- package/helpers.mjs +13 -17
- package/package.json +2 -2
package/README
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
╚══════╝ ╚═════╝ ╚═╝ ╚══╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
Version 1.0.0-rc.
|
|
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
|
|
78
|
-
|
|
79
|
-
|
|
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 '
|
|
141
|
-
|
|
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
|
|
74
|
-
|
|
75
|
-
|
|
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 '
|
|
137
|
-
|
|
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:
|
|
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:
|
|
107
|
-
maxLength:
|
|
108
|
-
min:
|
|
109
|
-
max:
|
|
110
|
-
step:
|
|
111
|
-
pattern:
|
|
112
|
-
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:
|
|
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:
|
|
172
|
-
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
|
|
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 :
|
|
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:
|
|
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:
|
|
103
|
-
maxLength:
|
|
104
|
-
min:
|
|
105
|
-
max:
|
|
106
|
-
step:
|
|
107
|
-
pattern:
|
|
108
|
-
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:
|
|
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:
|
|
168
|
-
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
|
|
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 :
|
|
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
|
|
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
|
|
33
|
+
"@conform-to/dom": "1.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "^18.2.43",
|