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

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, getFormError, hasError, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
+import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, hasError, 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.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] : {};
@@ -15,7 +15,6 @@ function useForm() {
   var ref = useRef(null);
   var [error, setError] = 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 === '';
@@ -24,7 +23,6 @@ function useForm() {
   });
   var [fieldsetConfig, setFieldsetConfig] = 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,
@@ -43,17 +41,13 @@ function useForm() {
   }, []);
   useEffect(() => {
     var form = ref.current;
-
     if (!form || !config.state) {
       return;
     }
-
     setFormError(form, config.state);
-
     if (!form.reportValidity()) {
       focusFirstInvalidField(form);
     }
-
     requestSubmit(form);
   }, [config.state]);
   useEffect(() => {
@@ -62,80 +56,66 @@ function useForm() {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
-
       if (!form || !isFieldElement(field) || field.form !== form) {
         return;
       }
-
       if (formConfig.initialReport === 'onChange') {
         field.dataset.conformTouched = 'true';
       }
-
       if (field.dataset.conformTouched) {
         requestValidate(form, field.name);
       }
     };
-
     var handleBlur = event => {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
-
       if (!form || !isFieldElement(field) || field.form !== form) {
         return;
       }
-
       if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
         field.dataset.conformTouched = 'true';
         requestValidate(form, field.name);
       }
     };
-
     var handleInvalid = event => {
       var form = getFormElement(ref.current);
       var field = event.target;
-
       if (!form || !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 (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);
@@ -153,81 +133,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 (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 = getFormData(form, submitter);
-          var submission = 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 (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 = 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.
+               */
               setFormError(form, {
-                context: 'submit',
+                type: 'submit',
                 value: {},
                 error: []
               });
+              for (var _element of form.elements) {
+                if (isFieldElement(_element) && _element.willValidate) {
+                  submission.error.push([_element.name, _element.validationMessage]);
+                }
+              }
             }
-
-            _error = 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 (isFieldElement(field)) {
+                // Mark the field as touched
+                field.dataset.conformTouched = 'true';
+              }
+            }
           }
-
-          if (!config.noValidate && !submitter.formNoValidate && hasError(submission.error) || submission.context === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !submitter.formNoValidate && 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) {
             setFormError(form, submission);
-
             if (!form.reportValidity()) {
               focusFirstInvalidField(form);
             }
@@ -236,34 +213,29 @@ function useForm() {
           console.warn(e);
         }
       }
-
     },
     config: fieldsetConfig
   };
 }
+
 /**
  * All the information of the field, including state and config.
  */
 
 function useFieldset(ref, config) {
   var configRef = useRef(config);
-  var [uncontrolledState, setUncontrolledState] = useState( // @ts-expect-error
+  var [uncontrolledState, setUncontrolledState] = 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] = getPaths(name);
-
       if (typeof key === 'string') {
         var _initialError$key;
-
         var scopedName = 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 {
@@ -271,7 +243,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
@@ -279,17 +250,13 @@ function useFieldset(ref, config) {
   });
   var [error, setError] = 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;
   });
   useEffect(() => {
@@ -297,67 +264,54 @@ function useFieldset(ref, config) {
   });
   useEffect(() => {
     var invalidHandler = event => {
-      var _configRef$current$na, _configRef$current;
-
+      var _configRef$current$na;
       var form = 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 || !isFieldElement(field) || field.form !== form || !field.name.startsWith(fieldsetName)) {
         return;
       }
+      var [key, ...paths] = getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name);
 
-      var [key, ...paths] = 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 _objectSpread2(_objectSpread2({}, prev), {}, {
               [key]: field.validationMessage
             });
           });
         }
-
         event.preventDefault();
       }
     };
-
     var submitHandler = event => {
       var form = 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 (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]: ''
@@ -365,20 +319,15 @@ function useFieldset(ref, config) {
             }
           }
         }
-
         return next;
       });
     };
-
     var resetHandler = event => {
       var _fieldsetConfig$defau;
-
       var form = getFormElement(ref.current);
-
       if (!form || event.target !== form) {
         return;
       }
-
       var fieldsetConfig = configRef.current;
       setUncontrolledState({
         // @ts-expect-error
@@ -386,9 +335,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);
@@ -398,20 +347,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 = {
@@ -425,35 +372,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 = useRef(config);
   var [uncontrolledState, setUncontrolledState] = 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] = getPaths(name);
-
       if (typeof index === 'number') {
         var _initialError$index;
-
         var scopedName = 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 {
@@ -461,7 +399,6 @@ function useFieldList(ref, config) {
         }
       }
     }
-
     return {
       defaultValue: (_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [],
       initialError
@@ -469,7 +406,6 @@ function useFieldList(ref, config) {
   });
   var [entries, setEntries] = 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) => {
@@ -484,12 +420,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] : {};
@@ -505,7 +441,6 @@ function useFieldList(ref, config) {
         };
       };
     }
-
   });
   useEffect(() => {
     configRef.current = config;
@@ -513,18 +448,14 @@ function useFieldList(ref, config) {
   useEffect(() => {
     var submitHandler = event => {
       var form = getFormElement(ref.current);
-
       if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
         return;
       }
-
       var command = 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':
@@ -535,7 +466,6 @@ function useFieldList(ref, config) {
                 defaultValue: ["".concat(Date.now()), command.payload.defaultValue]
               })
             }));
-
           default:
             {
               return updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
@@ -544,16 +474,12 @@ function useFieldList(ref, config) {
       });
       event.preventDefault();
     };
-
     var resetHandler = event => {
       var _fieldConfig$defaultV, _fieldConfig$defaultV2;
-
       var form = 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 : [],
@@ -561,7 +487,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 () => {
@@ -569,19 +494,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 = useRef(null);
   var inputRef = useRef(null);
   var configRef = useRef(config);
@@ -590,12 +515,10 @@ function useControlledInput(config) {
     initialError: config.initialError
   });
   var [value, setValue] = 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', {
@@ -603,39 +526,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();
   };
-
   useEffect(() => {
     configRef.current = config;
   });
   useEffect(() => {
     var resetHandler = event => {
       var _configRef$current$de;
-
       var form = 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);
@@ -654,13 +569,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();
     }
-
   }, input(_objectSpread2(_objectSpread2({}, config), uncontrolledState), {
     type: 'text'
   })), {

package/module/index.js

@@ -1,4 +1,4 @@
-export { getFormError, hasError, isFieldElement, parse, shouldValidate } from '@conform-to/dom';
+export { getFormElements, hasError, parse, 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.2",
+	"version": "0.4.0",
 	"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.2"
+		"@conform-to/dom": "0.4.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"