@conform-to/react 0.7.0-pre.1 → 0.7.0-pre.2

package/README.md

@@ -507,7 +507,7 @@ export default function SignupForm() {
 
 ### list
 
-It provides serveral helpers to configure an intent button for [modifying a list](/docs/commands.md#modifying-a-list).
+It provides serveral helpers to configure an intent button for [modifying a list](/docs/intent-button.md#modifying-a-list).
 
 ```tsx
 import { list } from '@conform-to/react';
@@ -540,7 +540,7 @@ function Example() {
 
 ### validate
 
-It returns the properties required to configure an intent button for [validation](/docs/commands.md#validation).
+It returns the properties required to configure an intent button for [validation](/docs/intent-button.md#validation).
 
 ```tsx
 import { validate } from '@conform-to/react';
@@ -562,7 +562,7 @@ function Example() {
 
 ### requestIntent
 
-It lets you [trigger an intent](/docs/commands.md#triggering-an-intent) without requiring users to click on a button. It supports both [list](#list) and [validate](#validate) intent.
+It lets you [trigger an intent](/docs/intent-button.md#triggering-an-intent) without requiring users to click on a button. It supports both [list](#list) and [validate](#validate) intent.
 
 ```tsx
 import {

package/hooks.d.ts

@@ -1,4 +1,4 @@
-import { type FieldConstraint, type FieldElement, type FieldsetConstraint, type Submission, type KeysOf, type ResolveType, getFormEncType, getFormMethod } from '@conform-to/dom';
+import { type FieldConstraint, type FieldElement, type FieldsetConstraint, type Submission, type KeysOf, type ResolveType, getFormEncType, getFormMethod, parseIntent } from '@conform-to/dom';
 import { type FormEvent, type RefObject } from 'react';
 export type Primitive = null | undefined | string | number | boolean | Date;
 export interface FieldConfig<Schema> extends FieldConstraint<Schema> {
@@ -211,8 +211,5 @@ export declare function validateConstraint(options: {
     }) => string[];
 }): Submission;
 export declare function reportSubmission(form: HTMLFormElement, submission: Submission): void;
-/**
- * Check if the current focus is on a intent button.
- */
-export declare function isFocusedOnIntentButton(form: HTMLFormElement, intent: string): boolean;
+export declare function getScope(intent: ReturnType<typeof parseIntent>): string | null;
 export {};

package/hooks.js

@@ -144,7 +144,8 @@ function useForm() {
     if (!submission) {
       return {};
     }
-    var scope = dom.getScope(submission.intent);
+    var intent = dom.parseIntent(submission.intent);
+    var scope = getScope(intent);
     return scope === null ? submission.error : {
       [scope]: submission.error[scope]
     };
@@ -230,15 +231,30 @@ function useForm() {
             form,
             formData
           })) !== null && _config$onValidate !== void 0 ? _config$onValidate : dom.parse(formData);
-          var messages = Object.entries(submission.error).reduce((messages, _ref2) => {
-            var [, message] = _ref2;
-            return messages.concat(normalizeError(message));
-          }, []);
-          var shouldValidate = !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate);
-          var shouldFallbackToServer = messages.includes(VALIDATION_UNDEFINED);
-          var hasClientValidation = typeof config.onValidate !== 'undefined';
-          var isValid = messages.length === 0;
-          if (hasClientValidation && (dom.isSubmitting(submission.intent) ? shouldValidate && !isValid : !shouldFallbackToServer)) {
+          var {
+            errors: _errors,
+            shouldServerValidate
+          } = Object.entries(submission.error).reduce((result, _ref2) => {
+            var [, error] = _ref2;
+            for (var message of normalizeError(error)) {
+              if (message === VALIDATION_UNDEFINED) {
+                result.shouldServerValidate = true;
+              } else if (message !== VALIDATION_SKIPPED) {
+                result.errors.push(message);
+              }
+            }
+            return result;
+          }, {
+            errors: [],
+            shouldServerValidate: false
+          });
+          if (
+          // has client validation
+          typeof config.onValidate !== 'undefined' &&
+          // not necessary to validate on the server
+          !shouldServerValidate && (
+          // client validation failed or non submit intent
+          !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && _errors.length > 0 || dom.parseIntent(submission.intent) !== null)) {
             report(form, submission);
             event.preventDefault();
           } else {
@@ -341,27 +357,23 @@ function useFieldList(ref, config) {
       if (!form || event.target !== form) {
         return;
       }
-      var command = dom.parseListCommand(event.detail);
-      if ((command === null || command === void 0 ? void 0 : command.scope) !== configRef.current.name) {
-        // Ensure the scope of the listener are limited to specific field name
+      var intent = dom.parseIntent(event.detail);
+      if ((intent === null || intent === void 0 ? void 0 : intent.type) !== 'list' || (intent === null || intent === void 0 ? void 0 : intent.payload.name) !== configRef.current.name) {
         return;
       }
       setEntries(entries => {
-        switch (command.type) {
+        var list = [...entries];
+        switch (intent.payload.operation) {
           case 'append':
           case 'prepend':
           case 'replace':
-            return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
-              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
-                defaultValue: ["".concat(Date.now()),
-                // @ts-expect-error unknown type as it is sent through network
-                command.payload.defaultValue]
-              })
+            return dom.updateList(list, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, intent.payload), {}, {
+              defaultValue: [
+              // Generate a random key to avoid conflicts
+              crypto.getRandomValues(new Uint32Array(1))[0].toString(36), intent.payload.defaultValue]
             }));
           default:
-            {
-              return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
-            }
+            return dom.updateList(list, intent.payload);
         }
       });
       setError(error => {
@@ -371,21 +383,17 @@ function useFieldList(ref, config) {
             errorList[key] = messages;
           }
         }
-        switch (command.type) {
+        switch (intent.payload.operation) {
           case 'append':
           case 'prepend':
           case 'replace':
-            errorList = dom.updateList(errorList, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
-              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
-                defaultValue: undefined
-              })
+            errorList = dom.updateList(errorList, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, intent.payload), {}, {
+              defaultValue: undefined
             }));
             break;
           default:
-            {
-              errorList = dom.updateList(errorList, command);
-              break;
-            }
+            errorList = dom.updateList(errorList, intent.payload);
+            break;
         }
         return Object.assign({}, errorList);
       });
@@ -722,7 +730,8 @@ function reportSubmission(form, submission) {
       form.appendChild(button);
     }
   }
-  var scope = dom.getScope(submission.intent);
+  var intent = dom.parseIntent(submission.intent);
+  var scope = getScope(intent);
   for (var element of dom.getFormControls(form)) {
     var _elementName = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
     var messages = normalizeError(submission.error[_elementName]);
@@ -737,27 +746,24 @@ function reportSubmission(form, submission) {
       element.dispatchEvent(invalidEvent);
     }
   }
-  if (dom.isSubmitting(submission.intent) || isFocusedOnIntentButton(form, submission.intent)) {
-    if (scope) {
-      dom.focusFormControl(form, scope);
-    } else {
-      dom.focusFirstInvalidControl(form);
-    }
+  if (!intent) {
+    dom.focusFirstInvalidControl(form);
   }
 }
-
-/**
- * Check if the current focus is on a intent button.
- */
-function isFocusedOnIntentButton(form, intent) {
-  var element = document.activeElement;
-  return dom.isFieldElement(element) && element.type === 'submit' && element.form === form && element.name === dom.INTENT && element.value === intent;
+function getScope(intent) {
+  switch (intent === null || intent === void 0 ? void 0 : intent.type) {
+    case 'validate':
+      return intent.payload;
+    case 'list':
+      return intent.payload.name;
+  }
+  return null;
 }
 
 exports.FORM_ERROR_ELEMENT_NAME = FORM_ERROR_ELEMENT_NAME;
 exports.VALIDATION_SKIPPED = VALIDATION_SKIPPED;
 exports.VALIDATION_UNDEFINED = VALIDATION_UNDEFINED;
-exports.isFocusedOnIntentButton = isFocusedOnIntentButton;
+exports.getScope = getScope;
 exports.reportSubmission = reportSubmission;
 exports.useFieldList = useFieldList;
 exports.useFieldset = useFieldset;

package/hooks.mjs

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { getScope, getFormData, parse, isSubmitting, getFormAction, getFormEncType, getFormMethod, getPaths, getName, isFieldElement, getErrors, getFormControls, getFormElement, parseListCommand, updateList, getValidationMessage, focusFormControl, focusFirstInvalidControl, INTENT, isFocusableFormControl, requestIntent, validate } from '@conform-to/dom';
+import { parseIntent, getFormData, parse, getFormAction, getFormEncType, getFormMethod, getPaths, getName, isFieldElement, getErrors, getFormControls, getFormElement, updateList, getValidationMessage, focusFirstInvalidControl, isFocusableFormControl, requestIntent, validate } from '@conform-to/dom';
 import { useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 
 /**
@@ -140,7 +140,8 @@ function useForm() {
     if (!submission) {
       return {};
     }
-    var scope = getScope(submission.intent);
+    var intent = parseIntent(submission.intent);
+    var scope = getScope(intent);
     return scope === null ? submission.error : {
       [scope]: submission.error[scope]
     };
@@ -226,15 +227,30 @@ function useForm() {
             form,
             formData
           })) !== null && _config$onValidate !== void 0 ? _config$onValidate : parse(formData);
-          var messages = Object.entries(submission.error).reduce((messages, _ref2) => {
-            var [, message] = _ref2;
-            return messages.concat(normalizeError(message));
-          }, []);
-          var shouldValidate = !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate);
-          var shouldFallbackToServer = messages.includes(VALIDATION_UNDEFINED);
-          var hasClientValidation = typeof config.onValidate !== 'undefined';
-          var isValid = messages.length === 0;
-          if (hasClientValidation && (isSubmitting(submission.intent) ? shouldValidate && !isValid : !shouldFallbackToServer)) {
+          var {
+            errors: _errors,
+            shouldServerValidate
+          } = Object.entries(submission.error).reduce((result, _ref2) => {
+            var [, error] = _ref2;
+            for (var message of normalizeError(error)) {
+              if (message === VALIDATION_UNDEFINED) {
+                result.shouldServerValidate = true;
+              } else if (message !== VALIDATION_SKIPPED) {
+                result.errors.push(message);
+              }
+            }
+            return result;
+          }, {
+            errors: [],
+            shouldServerValidate: false
+          });
+          if (
+          // has client validation
+          typeof config.onValidate !== 'undefined' &&
+          // not necessary to validate on the server
+          !shouldServerValidate && (
+          // client validation failed or non submit intent
+          !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && _errors.length > 0 || parseIntent(submission.intent) !== null)) {
             report(form, submission);
             event.preventDefault();
           } else {
@@ -337,27 +353,23 @@ function useFieldList(ref, config) {
       if (!form || event.target !== form) {
         return;
       }
-      var command = parseListCommand(event.detail);
-      if ((command === null || command === void 0 ? void 0 : command.scope) !== configRef.current.name) {
-        // Ensure the scope of the listener are limited to specific field name
+      var intent = parseIntent(event.detail);
+      if ((intent === null || intent === void 0 ? void 0 : intent.type) !== 'list' || (intent === null || intent === void 0 ? void 0 : intent.payload.name) !== configRef.current.name) {
         return;
       }
       setEntries(entries => {
-        switch (command.type) {
+        var list = [...entries];
+        switch (intent.payload.operation) {
           case 'append':
           case 'prepend':
           case 'replace':
-            return updateList([...(entries !== null && entries !== void 0 ? entries : [])], _objectSpread2(_objectSpread2({}, command), {}, {
-              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
-                defaultValue: ["".concat(Date.now()),
-                // @ts-expect-error unknown type as it is sent through network
-                command.payload.defaultValue]
-              })
+            return updateList(list, _objectSpread2(_objectSpread2({}, intent.payload), {}, {
+              defaultValue: [
+              // Generate a random key to avoid conflicts
+              crypto.getRandomValues(new Uint32Array(1))[0].toString(36), intent.payload.defaultValue]
             }));
           default:
-            {
-              return updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
-            }
+            return updateList(list, intent.payload);
         }
       });
       setError(error => {
@@ -367,21 +379,17 @@ function useFieldList(ref, config) {
             errorList[key] = messages;
           }
         }
-        switch (command.type) {
+        switch (intent.payload.operation) {
           case 'append':
           case 'prepend':
           case 'replace':
-            errorList = updateList(errorList, _objectSpread2(_objectSpread2({}, command), {}, {
-              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
-                defaultValue: undefined
-              })
+            errorList = updateList(errorList, _objectSpread2(_objectSpread2({}, intent.payload), {}, {
+              defaultValue: undefined
             }));
             break;
           default:
-            {
-              errorList = updateList(errorList, command);
-              break;
-            }
+            errorList = updateList(errorList, intent.payload);
+            break;
         }
         return Object.assign({}, errorList);
       });
@@ -718,7 +726,8 @@ function reportSubmission(form, submission) {
       form.appendChild(button);
     }
   }
-  var scope = getScope(submission.intent);
+  var intent = parseIntent(submission.intent);
+  var scope = getScope(intent);
   for (var element of getFormControls(form)) {
     var _elementName = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
     var messages = normalizeError(submission.error[_elementName]);
@@ -733,21 +742,18 @@ function reportSubmission(form, submission) {
       element.dispatchEvent(invalidEvent);
     }
   }
-  if (isSubmitting(submission.intent) || isFocusedOnIntentButton(form, submission.intent)) {
-    if (scope) {
-      focusFormControl(form, scope);
-    } else {
-      focusFirstInvalidControl(form);
-    }
+  if (!intent) {
+    focusFirstInvalidControl(form);
   }
 }
-
-/**
- * Check if the current focus is on a intent button.
- */
-function isFocusedOnIntentButton(form, intent) {
-  var element = document.activeElement;
-  return isFieldElement(element) && element.type === 'submit' && element.form === form && element.name === INTENT && element.value === intent;
+function getScope(intent) {
+  switch (intent === null || intent === void 0 ? void 0 : intent.type) {
+    case 'validate':
+      return intent.payload;
+    case 'list':
+      return intent.payload.name;
+  }
+  return null;
 }
 
-export { FORM_ERROR_ELEMENT_NAME, VALIDATION_SKIPPED, VALIDATION_UNDEFINED, isFocusedOnIntentButton, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };
+export { FORM_ERROR_ELEMENT_NAME, VALIDATION_SKIPPED, VALIDATION_UNDEFINED, getScope, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.7.0-pre.1",
+	"version": "0.7.0-pre.2",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,7 +30,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.7.0-pre.1"
+		"@conform-to/dom": "0.7.0-pre.2"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"