@conform-to/react 0.4.0-pre.0 → 0.4.0-pre.1

package/hooks.d.ts

@@ -1,4 +1,4 @@
-import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type FormState, type ListCommand, type Primitive, type Submission } from '@conform-to/dom';
+import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type ListCommand, type Primitive, type Submission } from '@conform-to/dom';
 import { type InputHTMLAttributes, type FormEvent, type RefObject } from 'react';
 interface FormContext<Schema extends Record<string, any>> {
     form: HTMLFormElement;
@@ -6,6 +6,10 @@ interface FormContext<Schema extends Record<string, any>> {
     submission: Submission<Schema>;
 }
 export interface FormConfig<Schema extends Record<string, any>> {
+    /**
+     * Validation mode. Default to `client-only`.
+     */
+    mode?: 'client-only' | 'server-validation';
     /**
      * Define when the error should be reported initially.
      * Support "onSubmit", "onChange", "onBlur".
@@ -20,7 +24,7 @@ export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * An object describing the state from the last submission
      */
-    state?: FormState<Schema>;
+    state?: Submission<Schema>;
     /**
      * Enable native validation before hydation.
      *
@@ -36,7 +40,7 @@ export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * A function to be called when the form should be (re)validated.
      */
-    onValidate?: (context: FormContext<Schema>) => boolean;
+    onValidate?: (context: FormContext<Schema>) => void;
     /**
      * The submit event handler of the form. It will be called
      * only when the form is considered valid.
@@ -61,7 +65,7 @@ interface Form<Schema extends Record<string, any>> {
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#useform
  */
 export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
 /**
@@ -102,7 +106,7 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
 /**
  * Returns all the information about the fieldset.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usefieldset
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usefieldset
  */
 export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config?: FieldsetConfig<Schema>): Fieldset<Schema>;
 export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config?: FieldConfig<Schema>): Fieldset<Schema>;
@@ -129,7 +133,7 @@ interface ListControl<Schema> {
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usefieldlist
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
@@ -159,7 +163,7 @@ interface InputControl<Element extends {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usecontrolledinput
  */
 export declare function useControlledInput<Element extends {
     focus: () => void;

package/hooks.js

@@ -11,7 +11,7 @@ var helpers = require('./helpers.js');
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -27,15 +27,14 @@ function useForm() {
     return message !== null && message !== void 0 ? message : '';
   });
   var [fieldsetConfig, setFieldsetConfig] = react.useState(() => {
-    var _config$state$error2, _config$state2, _config$state3, _config$state$value, _config$state4;
+    var _config$state$error2, _config$state2, _config$state$value, _config$state3;
 
     var error = (_config$state$error2 = (_config$state2 = config.state) === null || _config$state2 === void 0 ? void 0 : _config$state2.error) !== null && _config$state$error2 !== void 0 ? _config$state$error2 : [];
-    var scope = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.scope;
     return {
-      defaultValue: (_config$state$value = (_config$state4 = config.state) === null || _config$state4 === void 0 ? void 0 : _config$state4.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
+      defaultValue: (_config$state$value = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
       initialError: error.filter(_ref2 => {
         var [name] = _ref2;
-        return name !== '' && dom.getSubmissionType(name) === null && (!scope || scope.includes(name));
+        return name !== '' && dom.getSubmissionType(name) === null;
       })
     };
   });
@@ -53,8 +52,10 @@ function useForm() {
       return;
     }
 
-    if (!dom.reportValidity(form, config.state)) {
-      dom.focusFirstInvalidField(form, config.state.scope);
+    dom.setFormError(form, config.state);
+
+    if (!form.reportValidity()) {
+      dom.focusFirstInvalidField(form);
     }
 
     dom.requestSubmit(form);
@@ -198,21 +199,31 @@ function useForm() {
           }
         }
 
-        if (typeof config.onValidate === 'function' && !config.noValidate && !submitter.formNoValidate) {
-          try {
-            if (!config.onValidate(context)) {
+        try {
+          if (!config.noValidate && !submitter.formNoValidate) {
+            var _config$onValidate;
+
+            (_config$onValidate = config.onValidate) === null || _config$onValidate === void 0 ? void 0 : _config$onValidate.call(config, context);
+
+            if (!form.reportValidity()) {
               dom.focusFirstInvalidField(form);
               event.preventDefault();
             }
-          } catch (e) {
+          }
+        } catch (e) {
+          if (e !== form) {
             console.warn(e);
           }
         }
 
         if (!event.defaultPrevented) {
-          var _config$onSubmit;
+          if (config.mode !== 'server-validation' && submission.type === 'validate') {
+            event.preventDefault();
+          } else {
+            var _config$onSubmit;
 
-          (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, context);
+            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, context);
+          }
         }
       }
 
@@ -275,64 +286,12 @@ function useFieldset(ref, config) {
     configRef.current = config;
   });
   react.useEffect(() => {
-    /**
-     * Reset the error state of each field if its validity is changed.
-     *
-     * This is a workaround as no official way is provided to notify
-     * when the validity of the field is changed from `invalid` to `valid`.
-     */
-    var resetError = form => {
-      setError(prev => {
-        var _configRef$current$na, _configRef$current;
-
-        var next = prev;
-        var fieldsetName = (_configRef$current$na = (_configRef$current = configRef.current) === null || _configRef$current === void 0 ? void 0 : _configRef$current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
-
-        for (var field of form.elements) {
-          if (dom.isFieldElement(field) && field.name.startsWith(fieldsetName)) {
-            var [key, ...paths] = dom.getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name);
-
-            if (typeof key === 'string' && paths.length === 0) {
-              var _next$key, _next;
-
-              var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
-              var nextMessage = field.validationMessage;
-              /**
-               * Techincally, checking prevMessage not being empty while nextMessage being empty
-               * is sufficient for our usecase. It checks if the message is changed instead to allow
-               * the hook to be useful independently.
-               */
-
-              if (prevMessage !== '' && prevMessage !== nextMessage) {
-                next = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, next), {}, {
-                  [key]: nextMessage
-                });
-              }
-            }
-          }
-        }
-
-        return next;
-      });
-    };
-
-    var handleInput = event => {
-      var form = dom.getFormElement(ref.current);
-      var field = event.target;
-
-      if (!form || !dom.isFieldElement(field) || field.form !== form) {
-        return;
-      }
-
-      resetError(form);
-    };
-
     var invalidHandler = event => {
-      var _configRef$current$na2, _configRef$current2;
+      var _configRef$current$na, _configRef$current;
 
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-      var fieldsetName = (_configRef$current$na2 = (_configRef$current2 = configRef.current) === null || _configRef$current2 === void 0 ? void 0 : _configRef$current2.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+      var fieldsetName = (_configRef$current$na = (_configRef$current = configRef.current) === null || _configRef$current === void 0 ? void 0 : _configRef$current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
 
       if (!form || !dom.isFieldElement(field) || field.form !== form || !field.name.startsWith(fieldsetName)) {
         return;
@@ -366,10 +325,39 @@ function useFieldset(ref, config) {
 
       if (!form || event.target !== form) {
         return;
-      } // This helps resetting error that fullfilled by the submitter
+      }
+      /**
+       * Reset the error state of each field if its validity is changed.
+       *
+       * This is a workaround as no official way is provided to notify
+       * when the validity of the field is changed from `invalid` to `valid`.
+       */
+
 
+      setError(prev => {
+        var _configRef$current$na2, _configRef$current2;
+
+        var next = prev;
+        var fieldsetName = (_configRef$current$na2 = (_configRef$current2 = configRef.current) === null || _configRef$current2 === void 0 ? void 0 : _configRef$current2.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
 
-      resetError(form);
+        for (var field of form.elements) {
+          if (dom.isFieldElement(field) && field.name.startsWith(fieldsetName)) {
+            var _next$key, _next;
+
+            var key = fieldsetName ? field.name.slice(fieldsetName.length + 1) : field.name;
+            var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
+            var nextMessage = field.validationMessage;
+
+            if (prevMessage !== '' && nextMessage === '') {
+              next = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, next), {}, {
+                [key]: ''
+              });
+            }
+          }
+        }
+
+        return next;
+      });
     };
 
     var resetHandler = event => {
@@ -388,15 +376,13 @@ function useFieldset(ref, config) {
         initialError: {}
       });
       setError({});
-    };
+    }; // The invalid event does not bubble and so listening on the capturing pharse is needed
 
-    document.addEventListener('input', handleInput); // The invalid event does not bubble and so listening on the capturing pharse is needed
 
     document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('submit', submitHandler);
     document.addEventListener('reset', resetHandler);
     return () => {
-      document.removeEventListener('input', handleInput);
       document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
@@ -437,7 +423,7 @@ function useFieldset(ref, config) {
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = react.useRef(config);
@@ -581,7 +567,7 @@ function useFieldList(ref, config) {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;

package/index.d.ts

@@ -1,3 +1,3 @@
-export { type FieldsetConstraint, type FormState, type Submission, hasError, isFieldElement, parse, reportValidity, } from '@conform-to/dom';
+export { type FieldsetConstraint, type Submission, hasError, isFieldElement, parse, setFormError, shouldValidate, } from '@conform-to/dom';
 export * from './hooks';
 export * as conform from './helpers';

package/index.js

@@ -20,9 +20,13 @@ Object.defineProperty(exports, 'parse', {
 	enumerable: true,
 	get: function () { return dom.parse; }
 });
-Object.defineProperty(exports, 'reportValidity', {
+Object.defineProperty(exports, 'setFormError', {
 	enumerable: true,
-	get: function () { return dom.reportValidity; }
+	get: function () { return dom.setFormError; }
+});
+Object.defineProperty(exports, 'shouldValidate', {
+	enumerable: true,
+	get: function () { return dom.shouldValidate; }
 });
 exports.useControlledInput = hooks.useControlledInput;
 exports.useFieldList = hooks.useFieldList;

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getSubmissionType, reportValidity, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
+import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
 import { useRef, useState, useEffect } from 'react';
 import { input } from './helpers.js';
 
@@ -7,7 +7,7 @@ import { input } from './helpers.js';
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -23,15 +23,14 @@ function useForm() {
     return message !== null && message !== void 0 ? message : '';
   });
   var [fieldsetConfig, setFieldsetConfig] = useState(() => {
-    var _config$state$error2, _config$state2, _config$state3, _config$state$value, _config$state4;
+    var _config$state$error2, _config$state2, _config$state$value, _config$state3;
 
     var error = (_config$state$error2 = (_config$state2 = config.state) === null || _config$state2 === void 0 ? void 0 : _config$state2.error) !== null && _config$state$error2 !== void 0 ? _config$state$error2 : [];
-    var scope = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.scope;
     return {
-      defaultValue: (_config$state$value = (_config$state4 = config.state) === null || _config$state4 === void 0 ? void 0 : _config$state4.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
+      defaultValue: (_config$state$value = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
       initialError: error.filter(_ref2 => {
         var [name] = _ref2;
-        return name !== '' && getSubmissionType(name) === null && (!scope || scope.includes(name));
+        return name !== '' && getSubmissionType(name) === null;
       })
     };
   });
@@ -49,8 +48,10 @@ function useForm() {
       return;
     }
 
-    if (!reportValidity(form, config.state)) {
-      focusFirstInvalidField(form, config.state.scope);
+    setFormError(form, config.state);
+
+    if (!form.reportValidity()) {
+      focusFirstInvalidField(form);
     }
 
     requestSubmit(form);
@@ -194,21 +195,31 @@ function useForm() {
           }
         }
 
-        if (typeof config.onValidate === 'function' && !config.noValidate && !submitter.formNoValidate) {
-          try {
-            if (!config.onValidate(context)) {
+        try {
+          if (!config.noValidate && !submitter.formNoValidate) {
+            var _config$onValidate;
+
+            (_config$onValidate = config.onValidate) === null || _config$onValidate === void 0 ? void 0 : _config$onValidate.call(config, context);
+
+            if (!form.reportValidity()) {
               focusFirstInvalidField(form);
               event.preventDefault();
             }
-          } catch (e) {
+          }
+        } catch (e) {
+          if (e !== form) {
             console.warn(e);
           }
         }
 
         if (!event.defaultPrevented) {
-          var _config$onSubmit;
+          if (config.mode !== 'server-validation' && submission.type === 'validate') {
+            event.preventDefault();
+          } else {
+            var _config$onSubmit;
 
-          (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, context);
+            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, context);
+          }
         }
       }
 
@@ -271,64 +282,12 @@ function useFieldset(ref, config) {
     configRef.current = config;
   });
   useEffect(() => {
-    /**
-     * Reset the error state of each field if its validity is changed.
-     *
-     * This is a workaround as no official way is provided to notify
-     * when the validity of the field is changed from `invalid` to `valid`.
-     */
-    var resetError = form => {
-      setError(prev => {
-        var _configRef$current$na, _configRef$current;
-
-        var next = prev;
-        var fieldsetName = (_configRef$current$na = (_configRef$current = configRef.current) === null || _configRef$current === void 0 ? void 0 : _configRef$current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
-
-        for (var field of form.elements) {
-          if (isFieldElement(field) && field.name.startsWith(fieldsetName)) {
-            var [key, ...paths] = getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name);
-
-            if (typeof key === 'string' && paths.length === 0) {
-              var _next$key, _next;
-
-              var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
-              var nextMessage = field.validationMessage;
-              /**
-               * Techincally, checking prevMessage not being empty while nextMessage being empty
-               * is sufficient for our usecase. It checks if the message is changed instead to allow
-               * the hook to be useful independently.
-               */
-
-              if (prevMessage !== '' && prevMessage !== nextMessage) {
-                next = _objectSpread2(_objectSpread2({}, next), {}, {
-                  [key]: nextMessage
-                });
-              }
-            }
-          }
-        }
-
-        return next;
-      });
-    };
-
-    var handleInput = event => {
-      var form = getFormElement(ref.current);
-      var field = event.target;
-
-      if (!form || !isFieldElement(field) || field.form !== form) {
-        return;
-      }
-
-      resetError(form);
-    };
-
     var invalidHandler = event => {
-      var _configRef$current$na2, _configRef$current2;
+      var _configRef$current$na, _configRef$current;
 
       var form = getFormElement(ref.current);
       var field = event.target;
-      var fieldsetName = (_configRef$current$na2 = (_configRef$current2 = configRef.current) === null || _configRef$current2 === void 0 ? void 0 : _configRef$current2.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+      var fieldsetName = (_configRef$current$na = (_configRef$current = configRef.current) === null || _configRef$current === void 0 ? void 0 : _configRef$current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
 
       if (!form || !isFieldElement(field) || field.form !== form || !field.name.startsWith(fieldsetName)) {
         return;
@@ -362,10 +321,39 @@ function useFieldset(ref, config) {
 
       if (!form || event.target !== form) {
         return;
-      } // This helps resetting error that fullfilled by the submitter
+      }
+      /**
+       * Reset the error state of each field if its validity is changed.
+       *
+       * This is a workaround as no official way is provided to notify
+       * when the validity of the field is changed from `invalid` to `valid`.
+       */
+
 
+      setError(prev => {
+        var _configRef$current$na2, _configRef$current2;
+
+        var next = prev;
+        var fieldsetName = (_configRef$current$na2 = (_configRef$current2 = configRef.current) === null || _configRef$current2 === void 0 ? void 0 : _configRef$current2.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
 
-      resetError(form);
+        for (var field of form.elements) {
+          if (isFieldElement(field) && field.name.startsWith(fieldsetName)) {
+            var _next$key, _next;
+
+            var key = fieldsetName ? field.name.slice(fieldsetName.length + 1) : field.name;
+            var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
+            var nextMessage = field.validationMessage;
+
+            if (prevMessage !== '' && nextMessage === '') {
+              next = _objectSpread2(_objectSpread2({}, next), {}, {
+                [key]: ''
+              });
+            }
+          }
+        }
+
+        return next;
+      });
     };
 
     var resetHandler = event => {
@@ -384,15 +372,13 @@ function useFieldset(ref, config) {
         initialError: {}
       });
       setError({});
-    };
+    }; // The invalid event does not bubble and so listening on the capturing pharse is needed
 
-    document.addEventListener('input', handleInput); // The invalid event does not bubble and so listening on the capturing pharse is needed
 
     document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('submit', submitHandler);
     document.addEventListener('reset', resetHandler);
     return () => {
-      document.removeEventListener('input', handleInput);
       document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
@@ -433,7 +419,7 @@ function useFieldset(ref, config) {
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = useRef(config);
@@ -577,7 +563,7 @@ function useFieldList(ref, config) {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;

package/module/index.js

@@ -1,4 +1,4 @@
-export { hasError, isFieldElement, parse, reportValidity } from '@conform-to/dom';
+export { hasError, isFieldElement, parse, setFormError, shouldValidate } from '@conform-to/dom';
 export { useControlledInput, useFieldList, useFieldset, useForm } from './hooks.js';
 import * as helpers from './helpers.js';
 export { helpers as conform };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
 	"license": "MIT",
-	"version": "0.4.0-pre.0",
+	"version": "0.4.0-pre.1",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -19,7 +19,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.4.0-pre.0"
+		"@conform-to/dom": "0.4.0-pre.1"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"