@conform-to/react 0.4.0-pre.2 → 0.4.0

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.2/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -19,7 +19,6 @@ function useForm() {
   var ref = react.useRef(null);
   var [error, setError] = react.useState(() => {
     var _config$state$error$f, _config$state, _config$state$error;
-
     var [, message] = (_config$state$error$f = (_config$state = config.state) === null || _config$state === void 0 ? void 0 : (_config$state$error = _config$state.error) === null || _config$state$error === void 0 ? void 0 : _config$state$error.find(_ref => {
       var [key] = _ref;
       return key === '';
@@ -28,7 +27,6 @@ function useForm() {
   });
   var [fieldsetConfig, setFieldsetConfig] = react.useState(() => {
     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 : [];
     return {
       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,
@@ -47,17 +45,13 @@ function useForm() {
   }, []);
   react.useEffect(() => {
     var form = ref.current;
-
     if (!form || !config.state) {
       return;
     }
-
     dom.setFormError(form, config.state);
-
     if (!form.reportValidity()) {
       dom.focusFirstInvalidField(form);
     }
-
     dom.requestSubmit(form);
   }, [config.state]);
   react.useEffect(() => {
@@ -66,80 +60,66 @@ function useForm() {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
-
       if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
-
       if (formConfig.initialReport === 'onChange') {
         field.dataset.conformTouched = 'true';
       }
-
       if (field.dataset.conformTouched) {
         dom.requestValidate(form, field.name);
       }
     };
-
     var handleBlur = event => {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
-
       if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
-
       if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
         field.dataset.conformTouched = 'true';
         dom.requestValidate(form, field.name);
       }
     };
-
     var handleInvalid = event => {
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-
       if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '') {
         return;
       }
-
       event.preventDefault();
-
       if (field.dataset.conformTouched) {
         setError(field.validationMessage);
       }
     };
-
     var handleReset = event => {
       var form = ref.current;
       var formConfig = configRef.current;
-
       if (!form || event.target !== form) {
         return;
-      } // Reset all field state
-
+      }
 
+      // Reset all field state
       for (var field of form.elements) {
         if (dom.isFieldElement(field)) {
           delete field.dataset.conformTouched;
           field.setCustomValidity('');
         }
       }
-
       setError('');
       setFieldsetConfig({
         defaultValue: formConfig.defaultValue,
         initialError: []
       });
     };
+
     /**
      * The input event handler will be triggered in capturing phase in order to
      * allow follow-up action in the bubble phase based on the latest validity
     	 * E.g. `useFieldset` reset the error of valid field after checking the
      * validity in the bubble phase.
      */
-
-
     document.addEventListener('input', handleInput, true);
     document.addEventListener('blur', handleBlur, true);
     document.addEventListener('invalid', handleInvalid, true);
@@ -157,81 +137,78 @@ function useForm() {
     props: {
       ref,
       noValidate,
-
       onSubmit(event) {
         var form = event.currentTarget;
         var nativeEvent = event.nativeEvent;
         var submitter = nativeEvent.submitter;
-
         for (var element of form.elements) {
           if (dom.isFieldElement(element) && element.name === '') {
             setError(element.validationMessage);
             break;
           }
         }
+
         /**
          * It checks defaultPrevented to confirm if the submission is intentional
          * This is utilized by `useFieldList` to modify the list state when the submit
          * event is captured and revalidate the form with new fields without triggering
          * a form submission at the same time.
          */
-
-
         if (!submitter || event.defaultPrevented) {
           event.preventDefault();
           return;
         }
-
         try {
+          var submission;
           var formData = dom.getFormData(form, submitter);
-          var submission = dom.parse(formData);
-          var _context = {
-            form,
-            formData,
-            submission
-          }; // Touch all fields only if the submitter is not a command button
-
-          if (submission.context === 'submit') {
-            for (var field of form.elements) {
-              if (dom.isFieldElement(field)) {
-                // Mark the field as touched
-                field.dataset.conformTouched = 'true';
-              }
-            }
-          }
-
-          var _error;
-
           if (typeof config.onValidate === 'function') {
-            _error = config.onValidate(_context);
+            submission = config.onValidate({
+              form,
+              formData
+            });
           } else {
+            submission = dom.parse(formData);
             if (config.mode !== 'server-validation') {
-              // Clear previous result
+              /**
+               * As there is no custom logic defined,
+               * removing the custom validity state will allow us
+               * finding the latest validation message.
+               *
+               * This is mainly used to showcase the constraint validation API.
+               */
               dom.setFormError(form, {
-                context: 'submit',
+                type: 'submit',
                 value: {},
                 error: []
               });
+              for (var _element of form.elements) {
+                if (dom.isFieldElement(_element) && _element.willValidate) {
+                  submission.error.push([_element.name, _element.validationMessage]);
+                }
+              }
             }
-
-            _error = dom.getFormError(form);
           }
 
-          if (_error.length > 0) {
-            submission.error.push(..._error);
+          // Touch all fields only if the submitter is not a command button
+          if (submission.type === 'submit') {
+            for (var field of form.elements) {
+              if (dom.isFieldElement(field)) {
+                // Mark the field as touched
+                field.dataset.conformTouched = 'true';
+              }
+            }
           }
-
-          if (!config.noValidate && !submitter.formNoValidate && dom.hasError(submission.error) || submission.context === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !submitter.formNoValidate && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             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, {
+              formData,
+              submission
+            });
           }
-
           if (event.defaultPrevented) {
             dom.setFormError(form, submission);
-
             if (!form.reportValidity()) {
               dom.focusFirstInvalidField(form);
             }
@@ -240,34 +217,29 @@ function useForm() {
           console.warn(e);
         }
       }
-
     },
     config: fieldsetConfig
   };
 }
+
 /**
  * All the information of the field, including state and config.
  */
 
 function useFieldset(ref, config) {
   var configRef = react.useRef(config);
-  var [uncontrolledState, setUncontrolledState] = react.useState( // @ts-expect-error
+  var [uncontrolledState, setUncontrolledState] = react.useState(
+  // @ts-expect-error
   () => {
     var _config$defaultValue;
-
     var initialError = {};
-
     for (var [name, message] of (_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : []) {
       var _config$initialError;
-
       var [key, ...paths] = dom.getPaths(name);
-
       if (typeof key === 'string') {
         var _initialError$key;
-
         var scopedName = dom.getName(paths);
         var entries = (_initialError$key = initialError[key]) !== null && _initialError$key !== void 0 ? _initialError$key : [];
-
         if (scopedName === '' && entries.length > 0 && entries[0][0] !== '') {
           initialError[key] = [[scopedName, message], ...entries];
         } else {
@@ -275,7 +247,6 @@ function useFieldset(ref, config) {
         }
       }
     }
-
     return {
       defaultValue: (_config$defaultValue = config === null || config === void 0 ? void 0 : config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : {},
       initialError
@@ -283,17 +254,13 @@ function useFieldset(ref, config) {
   });
   var [error, setError] = react.useState(() => {
     var result = {};
-
     for (var [key, entries] of Object.entries(uncontrolledState.initialError)) {
       var _entries$;
-
       var [name, message] = (_entries$ = entries === null || entries === void 0 ? void 0 : entries[0]) !== null && _entries$ !== void 0 ? _entries$ : [];
-
       if (name === '') {
         result[key] = message !== null && message !== void 0 ? message : '';
       }
     }
-
     return result;
   });
   react.useEffect(() => {
@@ -301,67 +268,54 @@ function useFieldset(ref, config) {
   });
   react.useEffect(() => {
     var invalidHandler = event => {
-      var _configRef$current$na, _configRef$current;
-
+      var _configRef$current$na;
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-      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 : '';
-
+      var fieldsetName = (_configRef$current$na = 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;
       }
+      var [key, ...paths] = dom.getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name);
 
-      var [key, ...paths] = dom.getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name); // Update the error only if the field belongs to the fieldset
-
+      // Update the error only if the field belongs to the fieldset
       if (typeof key === 'string' && paths.length === 0) {
         if (field.dataset.conformTouched) {
           setError(prev => {
             var _prev$key;
-
             var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
-
             if (prevMessage === field.validationMessage) {
               return prev;
             }
-
             return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
               [key]: field.validationMessage
             });
           });
         }
-
         event.preventDefault();
       }
     };
-
     var submitHandler = event => {
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form) {
         return;
       }
+
       /**
        * 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 _configRef$current$na2;
         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 : '';
-
+        var fieldsetName = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
         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]: ''
@@ -369,20 +323,15 @@ function useFieldset(ref, config) {
             }
           }
         }
-
         return next;
       });
     };
-
     var resetHandler = event => {
       var _fieldsetConfig$defau;
-
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form) {
         return;
       }
-
       var fieldsetConfig = configRef.current;
       setUncontrolledState({
         // @ts-expect-error
@@ -390,9 +339,9 @@ function useFieldset(ref, config) {
         initialError: {}
       });
       setError({});
-    }; // The invalid event does not bubble and so listening on the capturing pharse is needed
-
+    };
 
+    // 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);
@@ -402,20 +351,18 @@ function useFieldset(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
+
   /**
    * This allows us constructing the field at runtime as we have no information
    * about which fields would be available. The proxy will also help tracking
    * the usage of each field for optimization in the future.
    */
-
   return new Proxy({}, {
     get(_target, key) {
       var _fieldsetConfig$const, _error$key;
-
       if (typeof key !== 'string') {
         return;
       }
-
       var fieldsetConfig = config !== null && config !== void 0 ? config : {};
       var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
       var field = {
@@ -429,35 +376,26 @@ function useFieldset(ref, config) {
       };
       return field;
     }
-
   });
 }
-
 /**
  * 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.2/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = react.useRef(config);
   var [uncontrolledState, setUncontrolledState] = react.useState(() => {
     var _config$defaultValue2;
-
     var initialError = [];
-
     for (var [name, message] of (_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : []) {
       var _config$initialError2;
-
       var [index, ...paths] = dom.getPaths(name);
-
       if (typeof index === 'number') {
         var _initialError$index;
-
         var scopedName = dom.getName(paths);
-
         var _entries = (_initialError$index = initialError[index]) !== null && _initialError$index !== void 0 ? _initialError$index : [];
-
         if (scopedName === '' && _entries.length > 0 && _entries[0][0] !== '') {
           initialError[index] = [[scopedName, message], ..._entries];
         } else {
@@ -465,7 +403,6 @@ function useFieldList(ref, config) {
         }
       }
     }
-
     return {
       defaultValue: (_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [],
       initialError
@@ -473,7 +410,6 @@ function useFieldList(ref, config) {
   });
   var [entries, setEntries] = react.useState(() => {
     var _config$defaultValue3;
-
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
   });
   var list = entries.map((_ref3, index) => {
@@ -488,12 +424,12 @@ function useFieldList(ref, config) {
       }
     };
   });
+
   /***
    * This use proxy to capture all information about the command and
    * have it encoded in the value.
    */
-
-  var control = new Proxy({}, {
+  var command = new Proxy({}, {
     get(_target, type) {
       return function () {
         var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -509,7 +445,6 @@ function useFieldList(ref, config) {
         };
       };
     }
-
   });
   react.useEffect(() => {
     configRef.current = config;
@@ -517,18 +452,14 @@ function useFieldList(ref, config) {
   react.useEffect(() => {
     var submitHandler = event => {
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
         return;
       }
-
       var command = dom.parseListCommand(event.submitter.value);
-
       if (command.scope !== configRef.current.name) {
         // Ensure the scope of the listener are limited to specific field name
         return;
       }
-
       setEntries(entries => {
         switch (command.type) {
           case 'append':
@@ -539,7 +470,6 @@ function useFieldList(ref, config) {
                 defaultValue: ["".concat(Date.now()), command.payload.defaultValue]
               })
             }));
-
           default:
             {
               return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
@@ -548,16 +478,12 @@ function useFieldList(ref, config) {
       });
       event.preventDefault();
     };
-
     var resetHandler = event => {
       var _fieldConfig$defaultV, _fieldConfig$defaultV2;
-
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form) {
         return;
       }
-
       var fieldConfig = configRef.current;
       setUncontrolledState({
         defaultValue: (_fieldConfig$defaultV = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV !== void 0 ? _fieldConfig$defaultV : [],
@@ -565,7 +491,6 @@ function useFieldList(ref, config) {
       });
       setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
     };
-
     document.addEventListener('submit', submitHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
@@ -573,19 +498,19 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list, control];
+  return [list,
+  // @ts-expect-error proxy type
+  command];
 }
-
 /**
  * Returns the properties required to configure a shadow input for validation.
  * 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.2/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;
-
   var ref = react.useRef(null);
   var inputRef = react.useRef(null);
   var configRef = react.useRef(config);
@@ -594,12 +519,10 @@ function useControlledInput(config) {
     initialError: config.initialError
   });
   var [value, setValue] = react.useState("".concat((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : ''));
-
   var handleChange = eventOrValue => {
     if (!ref.current) {
       return;
     }
-
     var newValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
     ref.current.value = newValue;
     ref.current.dispatchEvent(new InputEvent('input', {
@@ -607,39 +530,31 @@ function useControlledInput(config) {
     }));
     setValue(newValue);
   };
-
   var handleBlur = () => {
     var _ref$current;
-
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('blur', {
       bubbles: true
     }));
   };
-
   var handleInvalid = event => {
     event.preventDefault();
   };
-
   react.useEffect(() => {
     configRef.current = config;
   });
   react.useEffect(() => {
     var resetHandler = event => {
       var _configRef$current$de;
-
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form) {
         return;
       }
-
       setUncontrolledState({
         defaultValue: configRef.current.defaultValue,
         initialError: configRef.current.initialError
       });
       setValue("".concat((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : ''));
     };
-
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('reset', resetHandler);
@@ -658,13 +573,10 @@ function useControlledInput(config) {
       whiteSpace: 'nowrap',
       borderWidth: 0
     },
-
     onFocus() {
       var _inputRef$current;
-
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
-
   }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
     type: 'text'
   })), {

package/index.d.ts

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

package/index.js

@@ -8,18 +8,14 @@ var helpers = require('./helpers.js');
 
 
 
-Object.defineProperty(exports, 'getFormError', {
+Object.defineProperty(exports, 'getFormElements', {
 	enumerable: true,
-	get: function () { return dom.getFormError; }
+	get: function () { return dom.getFormElements; }
 });
 Object.defineProperty(exports, 'hasError', {
 	enumerable: true,
 	get: function () { return dom.hasError; }
 });
-Object.defineProperty(exports, 'isFieldElement', {
-	enumerable: true,
-	get: function () { return dom.isFieldElement; }
-});
 Object.defineProperty(exports, 'parse', {
 	enumerable: true,
 	get: function () { return dom.parse; }