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

package/README.md

@@ -10,8 +10,11 @@
 - [useFieldset](#usefieldset)
 - [useFieldList](#usefieldlist)
 - [useControlledInput](#usecontrolledinput)
-- [createValidate](#createvalidate)
 - [conform](#conform)
+- [getFormElements](#getformelements)
+- [hasError](#haserror)
+- [parse](#parse)
+- [shouldValidate](#shouldvalidate)
 
 <!-- /aside -->
 
@@ -21,15 +24,23 @@ By default, the browser calls the [reportValidity()](https://developer.mozilla.o
 
 This hook enhances the form validation behaviour in 3 parts:
 
-1. It lets you hook up custom validation logic into different form events. For example, revalidation will be triggered whenever something changed.
-2. It provides options for you to decide the best timing to start reporting errors. This could be as earliest as the user start typing, or also as late as the user try submitting the form.
+1. It enhances form validation with custom rules by subscribing to different DOM events and reporting the errors only when it is configured to do so.
+2. It unifies client and server validation in one place.
 3. It exposes the state of each field in the form of [data attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*), such as `data-conform-touched`, allowing flexible styling across your form without the need to manipulate the class names.
 
 ```tsx
 import { useForm } from '@conform-to/react';
 
 function LoginForm() {
-  const formProps = useForm({
+  const form = useForm({
+    /**
+     * Validation mode.
+     * Support "client-only" or "server-validation".
+     *
+     * Default to `client-only`.
+     */
+    mode: 'client-only',
+
     /**
      * Define when the error should be reported initially.
      * Support "onSubmit", "onChange", "onBlur".
@@ -38,6 +49,16 @@ function LoginForm() {
      */
     initialReport: 'onBlur',
 
+    /**
+     * An object representing the initial value of the form.
+     */
+    defaultValue: undefined;
+
+    /**
+     * An object describing the state from the last submission
+     */
+    state: undefined;
+
     /**
      * Enable native validation before hydation.
      *
@@ -54,43 +75,38 @@ function LoginForm() {
 
     /**
      * A function to be called when the form should be (re)validated.
+     * Only sync validation is supported
      */
-    validate(form, submitter) {
+    onValidate({ form, formData, submission }) {
       // ...
     },
 
     /**
      * The submit event handler of the form.
      */
-    onSubmit(event) {
+    onSubmit(event, { form, formData, submission }) {
       // ...
     },
   });
 
-  return (
-    <form {...formProps}>
-      <input type="email" name="email" required />
-      <input type="password" name="password" required />
-      <button type="submit">Login</button>
-    </form>
-  );
+  // ...
 }
 ```
 
 <details>
-<summary>What is `formProps`?</summary>
+<summary>What is `form.props`?</summary>
 
 It is a group of properties properties required to hook into form events. They can also be set explicitly as shown below:
 
 ```tsx
 function RandomForm() {
-  const formProps = useForm();
+  const form = useForm();
 
   return (
     <form
-      ref={formProps.ref}
-      onSubmit={formProps.onSubmit}
-      noValidate={formProps.noValidate}
+      ref={form.props.ref}
+      onSubmit={form.props.onSubmit}
+      noValidate={form.props.noValidate}
     >
       {/* ... */}
     </form>
@@ -103,17 +119,17 @@ function RandomForm() {
 <details>
 <summary>Does it work with custom form component like Remix Form?</summary>
 
-Yes! It will fallback to native form submission if the submit event handler is omitted or the event is not default prevented.
+Yes! It will fallback to native form submission as long as the submit event is not default prevented.
 
 ```tsx
 import { useFrom } from '@conform-to/react';
 import { Form } from '@remix-run/react';
 
 function LoginForm() {
-  const formProps = useForm();
+  const form = useForm();
 
   return (
-    <Form method="post" action="/login" {...formProps}>
+    <Form method="post" action="/login" {...form.props}>
       {/* ... */}
     </Form>
   );
@@ -123,9 +139,9 @@ function LoginForm() {
 </details>
 
 <details>
-<summary>Is the `validate` function required?</summary>
+<summary>Is the `onValidate` function required?</summary>
 
-The `validate` function is not required if the validation logic can be fully covered by the [native constraints](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#validation-related_attributes), e.g. **required** / **min** / **pattern** etc.
+The `onValidate` function is not required if the validation logic can be fully covered by the [native constraints](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#validation-related_attributes), e.g. **required** / **min** / **pattern** etc.
 
 ```tsx
 import { useForm, useFieldset } from '@conform-to/react';
@@ -156,10 +172,10 @@ function LoginForm() {
 
 ### useFieldset
 
-This hook can be used to monitor the state of each field and help fields configuration. It lets you:
+This hook can be used to monitor the state of each field and help configuration. It lets you:
 
 1. Capturing errors at the form/fieldset level, removing the need to setup invalid handler on each field.
-2. Defining config in one central place. e.g. name, default value and constraint, then distributing it to each field using the [conform](#conform) helpers.
+2. Defining config in one central place. e.g. name, default value and constraint, then distributing it to each field with the [conform](#conform) helpers.
 
 ```tsx
 import { useForm, useFieldset } from '@conform-to/react';
@@ -278,33 +294,6 @@ function Fieldset() {
 }
 ```
 
-<details>
-<summary>Is it required to provide the FieldsetConfig to `useFieldset`?</summary>
-
-No. The only thing required is the ref object. All the config is optional. You can always pass them to each fields manually.
-
-```tsx
-import { useForm, useFieldset } from '@conform-to/react';
-
-function SubscriptionForm() {
-  const formProps = useForm();
-  const { email } = useFieldset(formProps.ref);
-
-  return (
-    <form {...formProps}>
-      <input
-        type="email"
-        name={email.config.name}
-        defaultValue="support@conform.dev"
-        required
-      />
-    </form>
-  );
-}
-```
-
-</details>
-
 <details>
 <summary>Why does `useFieldset` require a ref object of the form or fieldset?</summary>
 
@@ -335,7 +324,7 @@ function ExampleForm() {
 
 ### useFieldList
 
-It returns a list of key and config, with a group of helpers configuring buttons for list manipulation
+It returns a list of key and config, with helpers to configure command buttons with [list command](/docs/submission.md#list-command).
 
 ```tsx
 import { useFieldset, useFieldList } from '@conform-to/react';
@@ -356,7 +345,7 @@ type Collection = {
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books.config);
+  const [bookList, command] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -373,12 +362,12 @@ function CollectionFieldset() {
           />
 
           {/* To setup a delete button */}
-          <button {...control.remove({ index })}>Delete</button>
+          <button {...command.remove({ index })}>Delete</button>
         </div>
       ))}
 
       {/* To setup a button that can append a new row with optional default value */}
-      <button {...control.append({ defaultValue: { name: '', isbn: '' } })}>
+      <button {...command.append({ defaultValue: { name: '', isbn: '' } })}>
         add
       </button>
     </fieldset>
@@ -395,7 +384,7 @@ import { useRef } from 'react';
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books.config);
+  const [bookList, command] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -405,12 +394,12 @@ function CollectionFieldset() {
           <BookFieldset {...book.config} />
 
           {/* To setup a delete button */}
-          <button {...control.remove({ index })}>Delete</button>
+          <button {...command.remove({ index })}>Delete</button>
         </div>
       ))}
 
       {/* To setup a button that can append a new row */}
-      <button {...control.append()}>add</button>
+      <button {...command.append()}>add</button>
     </fieldset>
   );
 }
@@ -493,58 +482,7 @@ function MuiForm() {
         <MenuItem value="c">Category C</MenuItem>
       </TextField>
     </fieldset>
-  )
-}
-```
-
----
-
-### createValidate
-
-This help you configure a validate function to check the validity of each fields and setup custom messages using the Constraint Validation APIs.
-
-```tsx
-import { useForm, createValidate } from '@conform-to/react';
-
-export default function SignupForm() {
-  const formProps = useForm({
-    validate: createValidate((field, formData) => {
-      switch (field.name) {
-        case 'email':
-          if (field.validity.valueMissing) {
-            field.setCustomValidity('Email is required');
-          } else if (field.validity.typeMismatch) {
-            field.setCustomValidity('Please enter a valid email');
-          } else {
-            field.setCustomValidity('');
-          }
-          break;
-        case 'password':
-          if (field.validity.valueMissing) {
-            field.setCustomValidity('Password is required');
-          } else if (field.validity.tooShort) {
-            field.setCustomValidity(
-              'The password should be at least 10 characters long',
-            );
-          } else {
-            field.setCustomValidity('');
-          }
-          break;
-        case 'confirm-password': {
-          if (field.validity.valueMissing) {
-            field.setCustomValidity('Confirm Password is required');
-          } else if (field.value !== formData.get('password')) {
-            field.setCustomValidity('The password does not match');
-          } else {
-            field.setCustomValidity('');
-          }
-          break;
-        }
-      }
-    }),
-  });
-
-  return <form {...formProps}>{/* ... */}</form>;
+  );
 }
 ```
 
@@ -615,3 +553,110 @@ function RandomForm() {
   );
 }
 ```
+
+---
+
+### getFormElements
+
+It returns all _input_ / _select_ / _textarea_ or _button_ in the forms. Useful when looping through the form elements to validate each field.
+
+```tsx
+import { useForm, parse, getFormElements } from '@conform-to/react';
+
+export default function LoginForm() {
+  const form = useForm({
+    onValidate({ form, formData }) {
+      const submission = parse(formData);
+
+      for (const element of getFormElements(form)) {
+        switch (element.name) {
+          case 'email': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Email is required']);
+            } else if (element.validity.typeMismatch) {
+              submission.error.push([element.name, 'Email is invalid']);
+            }
+            break;
+          }
+          case 'password': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Password is required']);
+            }
+            break;
+          }
+        }
+      }
+
+      return submission;
+    },
+
+    // ....
+  });
+
+  // ...
+}
+```
+
+---
+
+### hasError
+
+This helper checks if there is any message defined in error array with the provided name.
+
+```ts
+import { hasError } from '@conform-to/react';
+
+/**
+ * Assume the error looks like this:
+ */
+const error = [['email', 'Email is required']];
+
+// This will log `true`
+console.log(hasError(error, 'email'));
+
+// This will log `false`
+console.log(hasError(error, 'password'));
+```
+
+---
+
+### parse
+
+It parses the formData based on the [naming convention](/docs/submission).
+
+```tsx
+import { parse } from '@conform-to/react';
+
+const formData = new FormData();
+const submission = parse(formData);
+
+console.log(submission);
+```
+
+---
+
+### shouldValidate
+
+This helper checks if the scope of validation includes a specific field by checking the submission:
+
+```tsx
+import { shouldValidate } from '@conform-to/react';
+
+/**
+ * The submission type and intent give us hint on what should be valdiated.
+ * If the type is 'validate', only the field with name matching the metadata must be validated.
+ * If the type is 'submit', everything should be validated (Default submission)
+ */
+const submission = {
+  context: 'validate',
+  intent: 'email',
+  value: {},
+  error: [],
+};
+
+// This will log 'true'
+console.log(shouldValidate(submission, 'email'));
+
+// This will log 'false'
+console.log(shouldValidate(submission, 'password'));
+```

package/hooks.d.ts

@@ -1,10 +1,5 @@
 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;
-    formData: FormData;
-    submission: Submission<Schema>;
-}
 export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * Validation mode. Default to `client-only`.
@@ -40,12 +35,18 @@ export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * A function to be called when the form should be (re)validated.
      */
-    onValidate?: (context: FormContext<Schema>) => void;
+    onValidate?: ({ form, formData, }: {
+        form: HTMLFormElement;
+        formData: FormData;
+    }) => Submission<Schema>;
     /**
      * The submit event handler of the form. It will be called
      * only when the form is considered valid.
      */
-    onSubmit?: (event: FormEvent<HTMLFormElement>, context: FormContext<Schema>) => void;
+    onSubmit?: (event: FormEvent<HTMLFormElement>, context: {
+        formData: FormData;
+        submission: Submission<Schema>;
+    }) => void;
 }
 /**
  * Properties to be applied to the form element
@@ -65,7 +66,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.1/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#useform
  */
 export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
 /**
@@ -106,41 +107,37 @@ 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.1/packages/conform-react/README.md#usefieldset
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/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>;
-interface ControlButtonProps {
+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>;
+interface CommandButtonProps {
     name?: string;
     value?: string;
     form?: string;
     formNoValidate: true;
 }
-declare type CommandPayload<Schema, Type extends ListCommand<FieldValue<Schema>>['type']> = Extract<ListCommand<FieldValue<Schema>>, {
+declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Schema>>['type']> = Extract<ListCommand<FieldValue<Schema>>, {
     type: Type;
 }>['payload'];
-/**
- * A group of helpers for configuring a list control button
- */
-interface ListControl<Schema> {
-    prepend(payload?: CommandPayload<Schema, 'prepend'>): ControlButtonProps;
-    append(payload?: CommandPayload<Schema, 'append'>): ControlButtonProps;
-    replace(payload: CommandPayload<Schema, 'replace'>): ControlButtonProps;
-    remove(payload: CommandPayload<Schema, 'remove'>): ControlButtonProps;
-    reorder(payload: CommandPayload<Schema, 'reorder'>): ControlButtonProps;
-}
 /**
  * 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.1/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldlist
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
         key: string;
         config: FieldConfig<Payload>;
     }>,
-    ListControl<Payload>
+    {
+        prepend(payload?: ListCommandPayload<Payload, 'prepend'>): CommandButtonProps;
+        append(payload?: ListCommandPayload<Payload, 'append'>): CommandButtonProps;
+        replace(payload: ListCommandPayload<Payload, 'replace'>): CommandButtonProps;
+        remove(payload: ListCommandPayload<Payload, 'remove'>): CommandButtonProps;
+        reorder(payload: ListCommandPayload<Payload, 'reorder'>): CommandButtonProps;
+    }
 ];
 interface ShadowInputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref: RefObject<HTMLInputElement>;
@@ -163,7 +160,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.1/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/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.1/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] : {};
@@ -182,48 +182,70 @@ function useForm() {
           return;
         }
 
-        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.type) {
-          for (var field of form.elements) {
-            if (dom.isFieldElement(field)) {
-              // Mark the field as touched
-              field.dataset.conformTouched = 'true';
-            }
-          }
-        }
-
         try {
-          if (!config.noValidate && !submitter.formNoValidate) {
-            var _config$onValidate;
+          var submission;
+          var formData = dom.getFormData(form, submitter);
 
-            (_config$onValidate = config.onValidate) === null || _config$onValidate === void 0 ? void 0 : _config$onValidate.call(config, context);
+          if (typeof config.onValidate === 'function') {
+            submission = config.onValidate({
+              form,
+              formData
+            });
+          } else {
+            submission = dom.parse(formData);
+
+            if (config.mode !== 'server-validation') {
+              /**
+               * 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, {
+                type: 'submit',
+                value: {},
+                error: []
+              });
 
-            if (!form.reportValidity()) {
-              dom.focusFirstInvalidField(form);
-              event.preventDefault();
+              for (var _element of form.elements) {
+                if (dom.isFieldElement(_element) && _element.willValidate) {
+                  submission.error.push([_element.name, _element.validationMessage]);
+                }
+              }
+            }
+          } // 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';
+              }
             }
           }
-        } catch (e) {
-          if (e !== form) {
-            console.warn(e);
-          }
-        }
 
-        if (!event.defaultPrevented) {
-          if (config.mode !== 'server-validation' && submission.type === 'validate') {
+          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);
+            }
+          }
+        } catch (e) {
+          console.warn(e);
         }
       }
 
@@ -287,11 +309,11 @@ 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;
@@ -335,10 +357,10 @@ function useFieldset(ref, config) {
 
 
       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)) {
@@ -423,7 +445,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.1/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);
@@ -479,7 +501,7 @@ function useFieldList(ref, config) {
    * 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] : {};
@@ -559,7 +581,8 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list, control];
+  return [list, // @ts-expect-error proxy type
+  command];
 }
 
 /**
@@ -567,7 +590,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.1/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;

package/index.d.ts

@@ -1,3 +1,3 @@
-export { type FieldsetConstraint, type Submission, hasError, isFieldElement, parse, setFormError, 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,22 +8,18 @@ var helpers = require('./helpers.js');
 
 
 
-Object.defineProperty(exports, 'hasError', {
+Object.defineProperty(exports, 'getFormElements', {
 	enumerable: true,
-	get: function () { return dom.hasError; }
+	get: function () { return dom.getFormElements; }
 });
-Object.defineProperty(exports, 'isFieldElement', {
+Object.defineProperty(exports, 'hasError', {
 	enumerable: true,
-	get: function () { return dom.isFieldElement; }
+	get: function () { return dom.hasError; }
 });
 Object.defineProperty(exports, 'parse', {
 	enumerable: true,
 	get: function () { return dom.parse; }
 });
-Object.defineProperty(exports, 'setFormError', {
-	enumerable: true,
-	get: function () { return dom.setFormError; }
-});
 Object.defineProperty(exports, 'shouldValidate', {
 	enumerable: true,
 	get: function () { return dom.shouldValidate; }

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, 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.1/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] : {};
@@ -178,48 +178,70 @@ function useForm() {
           return;
         }
 
-        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.type) {
-          for (var field of form.elements) {
-            if (isFieldElement(field)) {
-              // Mark the field as touched
-              field.dataset.conformTouched = 'true';
-            }
-          }
-        }
-
         try {
-          if (!config.noValidate && !submitter.formNoValidate) {
-            var _config$onValidate;
+          var submission;
+          var formData = getFormData(form, submitter);
 
-            (_config$onValidate = config.onValidate) === null || _config$onValidate === void 0 ? void 0 : _config$onValidate.call(config, context);
+          if (typeof config.onValidate === 'function') {
+            submission = config.onValidate({
+              form,
+              formData
+            });
+          } else {
+            submission = parse(formData);
+
+            if (config.mode !== 'server-validation') {
+              /**
+               * 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, {
+                type: 'submit',
+                value: {},
+                error: []
+              });
 
-            if (!form.reportValidity()) {
-              focusFirstInvalidField(form);
-              event.preventDefault();
+              for (var _element of form.elements) {
+                if (isFieldElement(_element) && _element.willValidate) {
+                  submission.error.push([_element.name, _element.validationMessage]);
+                }
+              }
+            }
+          } // 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';
+              }
             }
           }
-        } catch (e) {
-          if (e !== form) {
-            console.warn(e);
-          }
-        }
 
-        if (!event.defaultPrevented) {
-          if (config.mode !== 'server-validation' && submission.type === 'validate') {
+          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);
+            }
+          }
+        } catch (e) {
+          console.warn(e);
         }
       }
 
@@ -283,11 +305,11 @@ 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;
@@ -331,10 +353,10 @@ function useFieldset(ref, config) {
 
 
       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)) {
@@ -419,7 +441,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.1/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);
@@ -475,7 +497,7 @@ function useFieldList(ref, config) {
    * 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] : {};
@@ -555,7 +577,8 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list, control];
+  return [list, // @ts-expect-error proxy type
+  command];
 }
 
 /**
@@ -563,7 +586,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.1/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;

package/module/index.js

@@ -1,4 +1,4 @@
-export { hasError, isFieldElement, parse, setFormError, 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.1",
+	"version": "0.4.0-pre.3",
 	"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.1"
+		"@conform-to/dom": "0.4.0-pre.3"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"