@conform-to/react 1.9.1 → 1.10.0

package/README.md

@@ -7,7 +7,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.9.1 / License MIT / Copyright (c) 2025 Edmund Hung
+Version 1.10.0 / License MIT / Copyright (c) 2025 Edmund Hung
 
 Progressively enhance HTML forms with React. Build resilient, type-safe forms with no hassle using web standards.
 

package/dist/future/hooks.d.ts

@@ -1,6 +1,6 @@
 import { type Serialize, type SubmissionResult, serialize } from '@conform-to/dom/future';
 import { useEffect } from 'react';
-import type { FormContext, DefaultFieldMetadata, IntentDispatcher, FormMetadata, Fieldset, FormOptions, FieldName, Field, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef } from './types';
+import type { FormContext, DefaultMetadata, IntentDispatcher, FormMetadata, Fieldset, FormOptions, FieldName, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef } from './types';
 export declare const FormConfig: import("react").Context<{
     intentName: string;
     observer: {
@@ -66,7 +66,7 @@ export declare function useConform<ErrorShape, Value = undefined>(formRef: FormR
  */
 export declare function useForm<FormShape extends Record<string, any> = Record<string, any>, ErrorShape = string, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value>): {
     form: FormMetadata<ErrorShape>;
-    fields: Fieldset<FormShape, DefaultFieldMetadata<ErrorShape>>;
+    fields: Fieldset<FormShape, DefaultMetadata<ErrorShape>>;
     intent: IntentDispatcher;
 };
 /**
@@ -79,7 +79,7 @@ export declare function useForm<FormShape extends Record<string, any> = Record<s
  * function ErrorSummary() {
  *   const form = useFormMetadata();
  *
- *   if (!form.invalid) return null;
+ *   if (form.valid) return null;
  *
  *   return (
  *     <div>Please fix {Object.keys(form.fieldErrors).length} errors</div>
@@ -112,7 +112,7 @@ export declare function useFormMetadata<ErrorShape = string[]>(options?: {
  */
 export declare function useField<FieldShape = any>(name: FieldName<FieldShape>, options?: {
     formId?: string;
-}): Field<FieldShape>;
+}): FieldMetadata<FieldShape>;
 /**
  * A React hook that provides an intent dispatcher for programmatic form actions.
  * Intent dispatchers allow you to trigger form operations like validation, field updates,

package/dist/future/hooks.js

@@ -127,7 +127,7 @@ function useConform(formRef, options) {
     }
   }, [formRef, state$1.resetKey]);
   react.useEffect(() => {
-    if (!state$1.intendedValue) {
+    if (!state$1.clientIntendedValue) {
       return;
     }
     var formElement = dom.getFormElement(formRef);
@@ -136,9 +136,9 @@ function useConform(formRef, options) {
       console.error('Failed to update form value; No form element found');
       return;
     }
-    dom.updateFormValue(formElement, state$1.intendedValue, optionsRef.current.serialize);
+    dom.updateFormValue(formElement, state$1.clientIntendedValue, optionsRef.current.serialize);
     lastIntentedValueRef.current = undefined;
-  }, [formRef, state$1.intendedValue, optionsRef]);
+  }, [formRef, state$1.clientIntendedValue, optionsRef]);
   var handleSubmit = react.useCallback(event => {
     var _abortControllerRef$c2, _lastAsyncResultRef$c;
     var abortController = new AbortController();
@@ -172,9 +172,8 @@ function useConform(formRef, options) {
       }
 
       // Override submission value if the last intended value is not applied yet (i.e. batch updates)
-      if (typeof lastIntentedValueRef.current !== 'undefined') {
-        var _lastIntentedValueRef;
-        submission.payload = (_lastIntentedValueRef = lastIntentedValueRef.current) !== null && _lastIntentedValueRef !== void 0 ? _lastIntentedValueRef : {};
+      if (lastIntentedValueRef.current != null) {
+        submission.payload = lastIntentedValueRef.current;
       }
       var intendedValue = intent.applyIntent(submission);
 
@@ -432,7 +431,7 @@ function useForm(options) {
  * function ErrorSummary() {
  *   const form = useFormMetadata();
  *
- *   if (!form.invalid) return null;
+ *   if (form.valid) return null;
  *
  *   return (
  *     <div>Please fix {Object.keys(form.fieldErrors).length} errors</div>

package/dist/future/hooks.mjs

@@ -123,7 +123,7 @@ function useConform(formRef, options) {
     }
   }, [formRef, state.resetKey]);
   useEffect(() => {
-    if (!state.intendedValue) {
+    if (!state.clientIntendedValue) {
       return;
     }
     var formElement = getFormElement(formRef);
@@ -132,9 +132,9 @@ function useConform(formRef, options) {
       console.error('Failed to update form value; No form element found');
       return;
     }
-    updateFormValue(formElement, state.intendedValue, optionsRef.current.serialize);
+    updateFormValue(formElement, state.clientIntendedValue, optionsRef.current.serialize);
     lastIntentedValueRef.current = undefined;
-  }, [formRef, state.intendedValue, optionsRef]);
+  }, [formRef, state.clientIntendedValue, optionsRef]);
   var handleSubmit = useCallback(event => {
     var _abortControllerRef$c2, _lastAsyncResultRef$c;
     var abortController = new AbortController();
@@ -168,9 +168,8 @@ function useConform(formRef, options) {
       }
 
       // Override submission value if the last intended value is not applied yet (i.e. batch updates)
-      if (typeof lastIntentedValueRef.current !== 'undefined') {
-        var _lastIntentedValueRef;
-        submission.payload = (_lastIntentedValueRef = lastIntentedValueRef.current) !== null && _lastIntentedValueRef !== void 0 ? _lastIntentedValueRef : {};
+      if (lastIntentedValueRef.current != null) {
+        submission.payload = lastIntentedValueRef.current;
       }
       var intendedValue = applyIntent(submission);
 
@@ -428,7 +427,7 @@ function useForm(options) {
  * function ErrorSummary() {
  *   const form = useFormMetadata();
  *
- *   if (!form.invalid) return null;
+ *   if (form.valid) return null;
  *
  *   return (
  *     <div>Please fix {Object.keys(form.fieldErrors).length} errors</div>

package/dist/future/index.d.ts

@@ -1,5 +1,6 @@
-export type { FormValue, FormError } from '@conform-to/dom/future';
+export type { FormError, FormValue, Submission, SubmissionResult, } from '@conform-to/dom/future';
 export { parseSubmission, report, isDirty } from '@conform-to/dom/future';
-export type { Control, FormOptions, Fieldset, DefaultValue } from './types';
+export type { Control, DefaultValue, FormContext, FormMetadata, FormOptions, FormRef, FieldMetadata, FieldName, Fieldset, IntentDispatcher, } from './types';
 export { FormProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent, } from './hooks';
+export { memoize } from './memoize';
 //# sourceMappingURL=index.d.ts.map

package/dist/future/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var future = require('@conform-to/dom/future');
 var hooks = require('./hooks.js');
+var memoize = require('./memoize.js');
 
 
 
@@ -26,3 +27,4 @@ exports.useForm = hooks.useForm;
 exports.useFormData = hooks.useFormData;
 exports.useFormMetadata = hooks.useFormMetadata;
 exports.useIntent = hooks.useIntent;
+exports.memoize = memoize.memoize;

package/dist/future/index.mjs

@@ -1,2 +1,3 @@
 export { isDirty, parseSubmission, report } from '@conform-to/dom/future';
 export { FormProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent } from './hooks.mjs';
+export { memoize } from './memoize.mjs';

package/dist/future/memoize.d.ts

@@ -0,0 +1,49 @@
+/**
+ * A memoized function with cache clearing capability.
+ */
+export type Memoized<T extends (...args: any) => any> = {
+    (this: ThisParameterType<T>, ...args: Parameters<T>): ReturnType<T>;
+    /** Clears the memoization cache */
+    clearCache: () => void;
+};
+/**
+ * Default equality check that compares arguments using Object.is().
+ *
+ * @param prevArgs - Previous function arguments
+ * @param nextArgs - Current function arguments
+ * @returns True if all arguments are equal
+ */
+export declare function defaultEqualityCheck(prevArgs: any[], nextArgs: any[]): boolean;
+/**
+ * Memoizes function calls, caching only the most recent result to prevent redundant async validations.
+ *
+ * Built-in implementation based on memoize-one with enhanced async support.
+ * Can be replaced with other memoization libraries if needed.
+ *
+ * @param fn - The function to memoize
+ * @param isEqual - Custom equality function to compare arguments (defaults to shallow comparison)
+ * @returns Memoized function with cache clearing capability
+ *
+ * @example
+ * ```ts
+ * // Async validation with API call
+ * const validateUsername = useMemo(
+ *   () => memoize(async function isUnique(username: string) {
+ *     const response = await fetch(`/api/users/${username}`);
+ *     return response.ok ? null : ['Username is already taken'];
+ *   }),
+ *   []
+ * );
+ *
+ * // Usage in form validation
+ * async onValidate({ payload, error }) {
+ *   if (payload.username && !error.fieldErrors.username) {
+ *     const messages = await validateUsername(value.username);
+ *     if (messages) error.fieldErrors.username = messages;
+ *   }
+ *   return error;
+ * }
+ * ```
+ */
+export declare function memoize<T extends (...args: any) => any>(fn: T, isEqual?: (prevArgs: Parameters<T>, nextArgs: Parameters<T>) => boolean): Memoized<T>;
+//# sourceMappingURL=memoize.d.ts.map

package/dist/future/memoize.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * A memoized function with cache clearing capability.
+ */
+
+/**
+ * Default equality check that compares arguments using Object.is().
+ *
+ * @param prevArgs - Previous function arguments
+ * @param nextArgs - Current function arguments
+ * @returns True if all arguments are equal
+ */
+function defaultEqualityCheck(prevArgs, nextArgs) {
+  if (prevArgs.length !== nextArgs.length) {
+    return false;
+  }
+  for (var i = 0; i < prevArgs.length; i++) {
+    if (!Object.is(prevArgs[i], nextArgs[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Memoizes function calls, caching only the most recent result to prevent redundant async validations.
+ *
+ * Built-in implementation based on memoize-one with enhanced async support.
+ * Can be replaced with other memoization libraries if needed.
+ *
+ * @param fn - The function to memoize
+ * @param isEqual - Custom equality function to compare arguments (defaults to shallow comparison)
+ * @returns Memoized function with cache clearing capability
+ *
+ * @example
+ * ```ts
+ * // Async validation with API call
+ * const validateUsername = useMemo(
+ *   () => memoize(async function isUnique(username: string) {
+ *     const response = await fetch(`/api/users/${username}`);
+ *     return response.ok ? null : ['Username is already taken'];
+ *   }),
+ *   []
+ * );
+ *
+ * // Usage in form validation
+ * async onValidate({ payload, error }) {
+ *   if (payload.username && !error.fieldErrors.username) {
+ *     const messages = await validateUsername(value.username);
+ *     if (messages) error.fieldErrors.username = messages;
+ *   }
+ *   return error;
+ * }
+ * ```
+ */
+function memoize(fn) {
+  var isEqual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultEqualityCheck;
+  var cache = null;
+  function memoized() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    // Check if new arguments match last arguments including the context (this)
+    if (cache && cache.this === this && isEqual(cache.args, args)) {
+      return cache.result;
+    }
+    var result = fn.apply(this, args);
+    if (result instanceof Promise) {
+      result = result.catch(e => {
+        // If the promise is rejected, clear the cache so that the next call will re-invoke fn
+        cache = null;
+
+        // Re-throw the exception so that it can be handled by the caller
+        throw e;
+      });
+    }
+
+    // Update the cache
+    cache = {
+      this: this,
+      args,
+      result
+    };
+    return result;
+  }
+  memoized.clearCache = function clearCache() {
+    cache = null;
+  };
+  return memoized;
+}
+
+exports.defaultEqualityCheck = defaultEqualityCheck;
+exports.memoize = memoize;

package/dist/future/memoize.mjs

@@ -0,0 +1,91 @@
+/**
+ * A memoized function with cache clearing capability.
+ */
+
+/**
+ * Default equality check that compares arguments using Object.is().
+ *
+ * @param prevArgs - Previous function arguments
+ * @param nextArgs - Current function arguments
+ * @returns True if all arguments are equal
+ */
+function defaultEqualityCheck(prevArgs, nextArgs) {
+  if (prevArgs.length !== nextArgs.length) {
+    return false;
+  }
+  for (var i = 0; i < prevArgs.length; i++) {
+    if (!Object.is(prevArgs[i], nextArgs[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Memoizes function calls, caching only the most recent result to prevent redundant async validations.
+ *
+ * Built-in implementation based on memoize-one with enhanced async support.
+ * Can be replaced with other memoization libraries if needed.
+ *
+ * @param fn - The function to memoize
+ * @param isEqual - Custom equality function to compare arguments (defaults to shallow comparison)
+ * @returns Memoized function with cache clearing capability
+ *
+ * @example
+ * ```ts
+ * // Async validation with API call
+ * const validateUsername = useMemo(
+ *   () => memoize(async function isUnique(username: string) {
+ *     const response = await fetch(`/api/users/${username}`);
+ *     return response.ok ? null : ['Username is already taken'];
+ *   }),
+ *   []
+ * );
+ *
+ * // Usage in form validation
+ * async onValidate({ payload, error }) {
+ *   if (payload.username && !error.fieldErrors.username) {
+ *     const messages = await validateUsername(value.username);
+ *     if (messages) error.fieldErrors.username = messages;
+ *   }
+ *   return error;
+ * }
+ * ```
+ */
+function memoize(fn) {
+  var isEqual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultEqualityCheck;
+  var cache = null;
+  function memoized() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    // Check if new arguments match last arguments including the context (this)
+    if (cache && cache.this === this && isEqual(cache.args, args)) {
+      return cache.result;
+    }
+    var result = fn.apply(this, args);
+    if (result instanceof Promise) {
+      result = result.catch(e => {
+        // If the promise is rejected, clear the cache so that the next call will re-invoke fn
+        cache = null;
+
+        // Re-throw the exception so that it can be handled by the caller
+        throw e;
+      });
+    }
+
+    // Update the cache
+    cache = {
+      this: this,
+      args,
+      result
+    };
+    return result;
+  }
+  memoized.clearCache = function clearCache() {
+    cache = null;
+  };
+  return memoized;
+}
+
+export { defaultEqualityCheck, memoize };

package/dist/future/standard-schema.d.ts

@@ -0,0 +1,56 @@
+/** The Standard Schema interface. */
+export interface StandardSchemaV1<Input = unknown, Output = Input> {
+    /** The Standard Schema properties. */
+    readonly '~standard': StandardSchemaV1.Props<Input, Output>;
+}
+export declare namespace StandardSchemaV1 {
+    /** The Standard Schema properties interface. */
+    interface Props<Input = unknown, Output = Input> {
+        /** The version number of the standard. */
+        readonly version: 1;
+        /** The vendor name of the schema library. */
+        readonly vendor: string;
+        /** Validates unknown input values. */
+        readonly validate: (value: unknown) => Result<Output> | Promise<Result<Output>>;
+        /** Inferred types associated with the schema. */
+        readonly types?: Types<Input, Output> | undefined;
+    }
+    /** The result interface of the validate function. */
+    type Result<Output> = SuccessResult<Output> | FailureResult;
+    /** The result interface if validation succeeds. */
+    interface SuccessResult<Output> {
+        /** The typed output value. */
+        readonly value: Output;
+        /** The non-existent issues. */
+        readonly issues?: undefined;
+    }
+    /** The result interface if validation fails. */
+    interface FailureResult {
+        /** The issues of failed validation. */
+        readonly issues: ReadonlyArray<Issue>;
+    }
+    /** The issue interface of the failure output. */
+    interface Issue {
+        /** The error message of the issue. */
+        readonly message: string;
+        /** The path of the issue, if any. */
+        readonly path?: ReadonlyArray<PropertyKey | PathSegment> | undefined;
+    }
+    /** The path segment interface of the issue. */
+    interface PathSegment {
+        /** The key representing a path segment. */
+        readonly key: PropertyKey;
+    }
+    /** The Standard Schema types interface. */
+    interface Types<Input = unknown, Output = Input> {
+        /** The input type of the schema. */
+        readonly input: Input;
+        /** The output type of the schema. */
+        readonly output: Output;
+    }
+    /** Infers the input type of a Standard Schema. */
+    type InferInput<Schema extends StandardSchemaV1> = NonNullable<Schema['~standard']['types']>['input'];
+    /** Infers the output type of a Standard Schema. */
+    type InferOutput<Schema extends StandardSchemaV1> = NonNullable<Schema['~standard']['types']>['output'];
+}
+//# sourceMappingURL=standard-schema.d.ts.map

package/dist/future/state.d.ts

@@ -1,5 +1,5 @@
 import { type ValidationAttributes, type Serialize } from '@conform-to/dom/future';
-import type { DefaultFieldMetadata, Field, FieldName, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler } from './types';
+import type { DefaultMetadata, FieldMetadata, FieldName, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler } from './types';
 export declare function initializeState<ErrorShape>(): FormState<ErrorShape>;
 /**
  * Updates form state based on action type:
@@ -25,6 +25,7 @@ export declare function getDefaultListKey(prefix: string, initialValue: Record<s
 export declare function getListKey(context: FormContext<any>, name: string): string[];
 export declare function getErrors<ErrorShape>(state: FormState<ErrorShape>, name?: string): ErrorShape[] | undefined;
 export declare function getFieldErrors<ErrorShape>(state: FormState<ErrorShape>, name?: string): Record<string, ErrorShape[]>;
+export declare function isValid(state: FormState<any>, name?: string): boolean;
 /**
  * Gets validation constraint for a field, with fallback to parent array patterns.
  * e.g. "array[0].key" falls back to "array[].key" if specific constraint not found.
@@ -32,26 +33,26 @@ export declare function getFieldErrors<ErrorShape>(state: FormState<ErrorShape>,
 export declare function getConstraint(context: FormContext<any>, name: string): ValidationAttributes | undefined;
 export declare function getFormMetadata<ErrorShape>(context: FormContext<ErrorShape>, options: {
     serialize: Serialize;
-}): FormMetadata<ErrorShape, DefaultFieldMetadata<ErrorShape>>;
+}): FormMetadata<ErrorShape, DefaultMetadata<ErrorShape>>;
 export declare function getField<FieldShape, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
     serialize: Serialize;
     key?: string;
-}): Field<FieldShape, DefaultFieldMetadata<ErrorShape>>;
+}): FieldMetadata<FieldShape, DefaultMetadata<ErrorShape>>;
 /**
  * Creates a proxy that dynamically generates field objects when properties are accessed.
  */
 export declare function getFieldset<FieldShape = Record<string, any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name?: FieldName<FieldShape>;
     serialize: Serialize;
-}): Fieldset<FieldShape, DefaultFieldMetadata<ErrorShape>>;
+}): Fieldset<FieldShape, DefaultMetadata<ErrorShape>>;
 /**
  * Creates an array of field objects for list/array inputs
  */
 export declare function getFieldList<FieldShape = Array<any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
     serialize: Serialize;
-}): Field<[
+}): FieldMetadata<[
     FieldShape
-] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, DefaultFieldMetadata<ErrorShape>>[];
+] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, DefaultMetadata<ErrorShape>>[];
 //# sourceMappingURL=state.d.ts.map

package/dist/future/state.js

@@ -10,8 +10,8 @@ function initializeState() {
   return {
     resetKey: util.generateUniqueKey(),
     listKeys: {},
-    intendedValue: null,
-    serverValidatedValue: null,
+    clientIntendedValue: null,
+    serverIntendedValue: null,
     serverError: null,
     clientError: null,
     touchedFields: []
@@ -33,20 +33,20 @@ function updateState(state, action) {
 
   // Apply the form error and intended value from the result first
   state = action.type === 'client' ? util.merge(state, {
-    intendedValue: !action.intent ? value : (_action$intendedValue2 = action.intendedValue) !== null && _action$intendedValue2 !== void 0 ? _action$intendedValue2 : state.intendedValue,
+    clientIntendedValue: (_action$intendedValue2 = action.intendedValue) !== null && _action$intendedValue2 !== void 0 ? _action$intendedValue2 : state.clientIntendedValue,
+    serverIntendedValue: action.intendedValue ? null : state.serverIntendedValue,
     // Update client error only if the error is different from the previous one to minimize unnecessary re-renders
     clientError: typeof action.error !== 'undefined' && !future.deepEqual(state.clientError, action.error) ? action.error : state.clientError,
     // Reset server error if form value is changed
-    serverError: typeof action.error !== 'undefined' && !future.deepEqual(state.serverValidatedValue, value) ? null : state.serverError
+    serverError: typeof action.error !== 'undefined' && !future.deepEqual(state.serverIntendedValue, value) ? null : state.serverError
   }) : util.merge(state, {
-    intendedValue: action.type === 'initialize' ? value : state.intendedValue,
     // Clear client error to avoid showing stale errors
     clientError: null,
     // Update server error if the error is defined.
     // There is no need to check if the error is different as we are updating other states as well
     serverError: typeof action.error !== 'undefined' ? action.error : state.serverError,
     // Keep track of the value that the serverError is based on
-    serverValidatedValue: typeof action.error !== 'undefined' ? value : state.serverValidatedValue
+    serverIntendedValue: !future.deepEqual(state.serverIntendedValue, value) ? value : state.serverIntendedValue
   });
   if (action.type !== 'server' && typeof action.intent !== 'undefined') {
     var _action$intent, _action$ctx$handlers;
@@ -70,19 +70,19 @@ function updateState(state, action) {
   return state;
 }
 function getDefaultValue(context, name) {
-  var _ref, _context$state$intend;
+  var _ref, _context$state$server;
   var serialize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : future.serialize;
-  var value = future.getValueAtPath((_ref = (_context$state$intend = context.state.intendedValue) !== null && _context$state$intend !== void 0 ? _context$state$intend : context.defaultValue) !== null && _ref !== void 0 ? _ref : {}, name);
+  var value = future.getValueAtPath((_ref = (_context$state$server = context.state.serverIntendedValue) !== null && _context$state$server !== void 0 ? _context$state$server : context.state.clientIntendedValue) !== null && _ref !== void 0 ? _ref : context.defaultValue, name);
   var serializedValue = serialize(value);
   if (typeof serializedValue === 'string') {
     return serializedValue;
   }
 }
 function getDefaultOptions(context, name) {
-  var _ref2, _context$state$intend2;
+  var _ref2, _context$state$server2;
   var serialize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : future.serialize;
-  var value = future.getValueAtPath((_ref2 = (_context$state$intend2 = context.state.intendedValue) !== null && _context$state$intend2 !== void 0 ? _context$state$intend2 : context.defaultValue) !== null && _ref2 !== void 0 ? _ref2 : {}, name);
-  var serializedValue = typeof value !== 'undefined' ? serialize(value) : undefined;
+  var value = future.getValueAtPath((_ref2 = (_context$state$server2 = context.state.serverIntendedValue) !== null && _context$state$server2 !== void 0 ? _context$state$server2 : context.state.clientIntendedValue) !== null && _ref2 !== void 0 ? _ref2 : context.defaultValue, name);
+  var serializedValue = serialize(value);
   if (Array.isArray(serializedValue) && serializedValue.every(item => typeof item === 'string')) {
     return serializedValue;
   }
@@ -91,10 +91,10 @@ function getDefaultOptions(context, name) {
   }
 }
 function isDefaultChecked(context, name) {
-  var _ref3, _context$state$intend3;
+  var _ref3, _context$state$server3;
   var serialize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : future.serialize;
-  var value = future.getValueAtPath((_ref3 = (_context$state$intend3 = context.state.intendedValue) !== null && _context$state$intend3 !== void 0 ? _context$state$intend3 : context.defaultValue) !== null && _ref3 !== void 0 ? _ref3 : {}, name);
-  var serializedValue = typeof value !== 'undefined' ? serialize(value) : undefined;
+  var value = future.getValueAtPath((_ref3 = (_context$state$server3 = context.state.serverIntendedValue) !== null && _context$state$server3 !== void 0 ? _context$state$server3 : context.state.clientIntendedValue) !== null && _ref3 !== void 0 ? _ref3 : context.defaultValue, name);
+  var serializedValue = serialize(value);
   return serializedValue === 'on';
 }
 
@@ -116,8 +116,8 @@ function getDefaultListKey(prefix, initialValue, name) {
   return util.getArrayAtPath(initialValue, name).map((_, index) => "".concat(prefix, "-").concat(future.appendPathSegment(name, index)));
 }
 function getListKey(context, name) {
-  var _context$state$listKe, _context$state$listKe2, _context$state$intend4;
-  return (_context$state$listKe = (_context$state$listKe2 = context.state.listKeys) === null || _context$state$listKe2 === void 0 ? void 0 : _context$state$listKe2[name]) !== null && _context$state$listKe !== void 0 ? _context$state$listKe : getDefaultListKey(context.state.resetKey, (_context$state$intend4 = context.state.intendedValue) !== null && _context$state$intend4 !== void 0 ? _context$state$intend4 : context.defaultValue, name);
+  var _context$state$listKe, _context$state$listKe2, _ref4, _context$state$server4;
+  return (_context$state$listKe = (_context$state$listKe2 = context.state.listKeys) === null || _context$state$listKe2 === void 0 ? void 0 : _context$state$listKe2[name]) !== null && _context$state$listKe !== void 0 ? _context$state$listKe : getDefaultListKey(context.state.resetKey, (_ref4 = (_context$state$server4 = context.state.serverIntendedValue) !== null && _context$state$server4 !== void 0 ? _context$state$server4 : context.state.clientIntendedValue) !== null && _ref4 !== void 0 ? _ref4 : context.defaultValue, name);
 }
 function getErrors(state, name) {
   var _state$serverError;
@@ -131,19 +131,53 @@ function getErrors(state, name) {
   }
 }
 function getFieldErrors(state, name) {
+  var _state$serverError2;
   var result = {};
+  var error = (_state$serverError2 = state.serverError) !== null && _state$serverError2 !== void 0 ? _state$serverError2 : state.clientError;
+  if (error) {
+    var basePath = future.getPathSegments(name);
+    for (var field of Object.keys(error.fieldErrors)) {
+      var relativePath = future.getRelativePath(field, basePath);
+
+      // Only include errors for specified field's children
+      if (!relativePath || relativePath.length === 0) {
+        continue;
+      }
+      var _error = getErrors(state, field);
+      if (typeof _error !== 'undefined') {
+        result[future.formatPathSegments(relativePath)] = _error;
+      }
+    }
+  }
+  return result;
+}
+function isValid(state, name) {
+  var _state$serverError3;
+  var error = (_state$serverError3 = state.serverError) !== null && _state$serverError3 !== void 0 ? _state$serverError3 : state.clientError;
+
+  // If there is no error, it must be valid
+  if (!error) {
+    return true;
+  }
   var basePath = future.getPathSegments(name);
-  for (var field of state.touchedFields) {
-    var relativePath = future.getRelativePath(field, basePath);
-    if (!relativePath || relativePath.length === 0) {
+  for (var field of Object.keys(error.fieldErrors)) {
+    // When checking a specific field, only check that field and its children
+    if (name && !future.getRelativePath(field, basePath)) {
       continue;
     }
-    var error = getErrors(state, field);
-    if (typeof error !== 'undefined') {
-      result[future.formatPathSegments(relativePath)] = error;
+
+    // If the field is not touched, we don't consider its error
+    var _error2 = getErrors(state, field);
+    if (_error2) {
+      return false;
     }
   }
-  return result;
+
+  // Make sure there is no form error when checking the whole form
+  if (!name) {
+    return !getErrors(state);
+  }
+  return true;
 }
 
 /**
@@ -189,7 +223,7 @@ function getFormMetadata(context, options) {
       return isTouched(context.state);
     },
     get valid() {
-      return typeof getErrors(context.state) === 'undefined';
+      return isValid(context.state);
     },
     get invalid() {
       return !this.valid;
@@ -248,7 +282,7 @@ function getField(context, options) {
       return isTouched(context.state, options.name);
     },
     get valid() {
-      return typeof getErrors(context.state, options.name) === 'undefined';
+      return isValid(context.state, options.name);
     },
     get invalid() {
       return !this.valid;
@@ -315,4 +349,5 @@ exports.getListKey = getListKey;
 exports.initializeState = initializeState;
 exports.isDefaultChecked = isDefaultChecked;
 exports.isTouched = isTouched;
+exports.isValid = isValid;
 exports.updateState = updateState;

package/dist/future/state.mjs

@@ -6,8 +6,8 @@ function initializeState() {
   return {
     resetKey: generateUniqueKey(),
     listKeys: {},
-    intendedValue: null,
-    serverValidatedValue: null,
+    clientIntendedValue: null,
+    serverIntendedValue: null,
     serverError: null,
     clientError: null,
     touchedFields: []
@@ -29,20 +29,20 @@ function updateState(state, action) {
 
   // Apply the form error and intended value from the result first
   state = action.type === 'client' ? merge(state, {
-    intendedValue: !action.intent ? value : (_action$intendedValue2 = action.intendedValue) !== null && _action$intendedValue2 !== void 0 ? _action$intendedValue2 : state.intendedValue,
+    clientIntendedValue: (_action$intendedValue2 = action.intendedValue) !== null && _action$intendedValue2 !== void 0 ? _action$intendedValue2 : state.clientIntendedValue,
+    serverIntendedValue: action.intendedValue ? null : state.serverIntendedValue,
     // Update client error only if the error is different from the previous one to minimize unnecessary re-renders
     clientError: typeof action.error !== 'undefined' && !deepEqual(state.clientError, action.error) ? action.error : state.clientError,
     // Reset server error if form value is changed
-    serverError: typeof action.error !== 'undefined' && !deepEqual(state.serverValidatedValue, value) ? null : state.serverError
+    serverError: typeof action.error !== 'undefined' && !deepEqual(state.serverIntendedValue, value) ? null : state.serverError
   }) : merge(state, {
-    intendedValue: action.type === 'initialize' ? value : state.intendedValue,
     // Clear client error to avoid showing stale errors
     clientError: null,
     // Update server error if the error is defined.
     // There is no need to check if the error is different as we are updating other states as well
     serverError: typeof action.error !== 'undefined' ? action.error : state.serverError,
     // Keep track of the value that the serverError is based on
-    serverValidatedValue: typeof action.error !== 'undefined' ? value : state.serverValidatedValue
+    serverIntendedValue: !deepEqual(state.serverIntendedValue, value) ? value : state.serverIntendedValue
   });
   if (action.type !== 'server' && typeof action.intent !== 'undefined') {
     var _action$intent, _action$ctx$handlers;
@@ -66,19 +66,19 @@ function updateState(state, action) {
   return state;
 }
 function getDefaultValue(context, name) {
-  var _ref, _context$state$intend;
+  var _ref, _context$state$server;
   var serialize$1 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : serialize;
-  var value = getValueAtPath((_ref = (_context$state$intend = context.state.intendedValue) !== null && _context$state$intend !== void 0 ? _context$state$intend : context.defaultValue) !== null && _ref !== void 0 ? _ref : {}, name);
+  var value = getValueAtPath((_ref = (_context$state$server = context.state.serverIntendedValue) !== null && _context$state$server !== void 0 ? _context$state$server : context.state.clientIntendedValue) !== null && _ref !== void 0 ? _ref : context.defaultValue, name);
   var serializedValue = serialize$1(value);
   if (typeof serializedValue === 'string') {
     return serializedValue;
   }
 }
 function getDefaultOptions(context, name) {
-  var _ref2, _context$state$intend2;
+  var _ref2, _context$state$server2;
   var serialize$1 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : serialize;
-  var value = getValueAtPath((_ref2 = (_context$state$intend2 = context.state.intendedValue) !== null && _context$state$intend2 !== void 0 ? _context$state$intend2 : context.defaultValue) !== null && _ref2 !== void 0 ? _ref2 : {}, name);
-  var serializedValue = typeof value !== 'undefined' ? serialize$1(value) : undefined;
+  var value = getValueAtPath((_ref2 = (_context$state$server2 = context.state.serverIntendedValue) !== null && _context$state$server2 !== void 0 ? _context$state$server2 : context.state.clientIntendedValue) !== null && _ref2 !== void 0 ? _ref2 : context.defaultValue, name);
+  var serializedValue = serialize$1(value);
   if (Array.isArray(serializedValue) && serializedValue.every(item => typeof item === 'string')) {
     return serializedValue;
   }
@@ -87,10 +87,10 @@ function getDefaultOptions(context, name) {
   }
 }
 function isDefaultChecked(context, name) {
-  var _ref3, _context$state$intend3;
+  var _ref3, _context$state$server3;
   var serialize$1 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : serialize;
-  var value = getValueAtPath((_ref3 = (_context$state$intend3 = context.state.intendedValue) !== null && _context$state$intend3 !== void 0 ? _context$state$intend3 : context.defaultValue) !== null && _ref3 !== void 0 ? _ref3 : {}, name);
-  var serializedValue = typeof value !== 'undefined' ? serialize$1(value) : undefined;
+  var value = getValueAtPath((_ref3 = (_context$state$server3 = context.state.serverIntendedValue) !== null && _context$state$server3 !== void 0 ? _context$state$server3 : context.state.clientIntendedValue) !== null && _ref3 !== void 0 ? _ref3 : context.defaultValue, name);
+  var serializedValue = serialize$1(value);
   return serializedValue === 'on';
 }
 
@@ -112,8 +112,8 @@ function getDefaultListKey(prefix, initialValue, name) {
   return getArrayAtPath(initialValue, name).map((_, index) => "".concat(prefix, "-").concat(appendPathSegment(name, index)));
 }
 function getListKey(context, name) {
-  var _context$state$listKe, _context$state$listKe2, _context$state$intend4;
-  return (_context$state$listKe = (_context$state$listKe2 = context.state.listKeys) === null || _context$state$listKe2 === void 0 ? void 0 : _context$state$listKe2[name]) !== null && _context$state$listKe !== void 0 ? _context$state$listKe : getDefaultListKey(context.state.resetKey, (_context$state$intend4 = context.state.intendedValue) !== null && _context$state$intend4 !== void 0 ? _context$state$intend4 : context.defaultValue, name);
+  var _context$state$listKe, _context$state$listKe2, _ref4, _context$state$server4;
+  return (_context$state$listKe = (_context$state$listKe2 = context.state.listKeys) === null || _context$state$listKe2 === void 0 ? void 0 : _context$state$listKe2[name]) !== null && _context$state$listKe !== void 0 ? _context$state$listKe : getDefaultListKey(context.state.resetKey, (_ref4 = (_context$state$server4 = context.state.serverIntendedValue) !== null && _context$state$server4 !== void 0 ? _context$state$server4 : context.state.clientIntendedValue) !== null && _ref4 !== void 0 ? _ref4 : context.defaultValue, name);
 }
 function getErrors(state, name) {
   var _state$serverError;
@@ -127,19 +127,53 @@ function getErrors(state, name) {
   }
 }
 function getFieldErrors(state, name) {
+  var _state$serverError2;
   var result = {};
+  var error = (_state$serverError2 = state.serverError) !== null && _state$serverError2 !== void 0 ? _state$serverError2 : state.clientError;
+  if (error) {
+    var basePath = getPathSegments(name);
+    for (var field of Object.keys(error.fieldErrors)) {
+      var relativePath = getRelativePath(field, basePath);
+
+      // Only include errors for specified field's children
+      if (!relativePath || relativePath.length === 0) {
+        continue;
+      }
+      var _error = getErrors(state, field);
+      if (typeof _error !== 'undefined') {
+        result[formatPathSegments(relativePath)] = _error;
+      }
+    }
+  }
+  return result;
+}
+function isValid(state, name) {
+  var _state$serverError3;
+  var error = (_state$serverError3 = state.serverError) !== null && _state$serverError3 !== void 0 ? _state$serverError3 : state.clientError;
+
+  // If there is no error, it must be valid
+  if (!error) {
+    return true;
+  }
   var basePath = getPathSegments(name);
-  for (var field of state.touchedFields) {
-    var relativePath = getRelativePath(field, basePath);
-    if (!relativePath || relativePath.length === 0) {
+  for (var field of Object.keys(error.fieldErrors)) {
+    // When checking a specific field, only check that field and its children
+    if (name && !getRelativePath(field, basePath)) {
       continue;
     }
-    var error = getErrors(state, field);
-    if (typeof error !== 'undefined') {
-      result[formatPathSegments(relativePath)] = error;
+
+    // If the field is not touched, we don't consider its error
+    var _error2 = getErrors(state, field);
+    if (_error2) {
+      return false;
     }
   }
-  return result;
+
+  // Make sure there is no form error when checking the whole form
+  if (!name) {
+    return !getErrors(state);
+  }
+  return true;
 }
 
 /**
@@ -185,7 +219,7 @@ function getFormMetadata(context, options) {
       return isTouched(context.state);
     },
     get valid() {
-      return typeof getErrors(context.state) === 'undefined';
+      return isValid(context.state);
     },
     get invalid() {
       return !this.valid;
@@ -244,7 +278,7 @@ function getField(context, options) {
       return isTouched(context.state, options.name);
     },
     get valid() {
-      return typeof getErrors(context.state, options.name) === 'undefined';
+      return isValid(context.state, options.name);
     },
     get invalid() {
       return !this.valid;
@@ -297,4 +331,4 @@ function getFieldList(context, options) {
   });
 }
 
-export { getConstraint, getDefaultListKey, getDefaultOptions, getDefaultValue, getErrors, getField, getFieldErrors, getFieldList, getFieldset, getFormMetadata, getListKey, initializeState, isDefaultChecked, isTouched, updateState };
+export { getConstraint, getDefaultListKey, getDefaultOptions, getDefaultValue, getErrors, getField, getFieldErrors, getFieldList, getFieldset, getFormMetadata, getListKey, initializeState, isDefaultChecked, isTouched, isValid, updateState };

package/dist/future/types.d.ts

@@ -1,5 +1,5 @@
 import type { FormError, FormValue, SubmissionResult, ValidationAttributes } from '@conform-to/dom/future';
-import { StandardSchemaV1 } from '@standard-schema/spec';
+import type { StandardSchemaV1 } from './standard-schema';
 export type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
@@ -70,10 +70,10 @@ export type DefaultValue<FormShape> = FormShape extends string | number | boolea
 export type FormState<ErrorShape> = {
     /** Unique identifier that changes on form reset to trigger reset side effects */
     resetKey: string;
-    /** Form values from user intent actions (validate, update, insert, remove, etc.) */
-    intendedValue: Record<string, unknown> | null;
-    /** Form values that have been validated on the server */
-    serverValidatedValue: Record<string, unknown> | null;
+    /** Form values from client actions that will be synced to the DOM  */
+    clientIntendedValue: Record<string, unknown> | null;
+    /** Form values from server actions, or submitted values when no server intent exists */
+    serverIntendedValue: Record<string, unknown> | null;
     /** Validation errors from server-side processing */
     serverError: FormError<ErrorShape> | null;
     /** Validation errors from client-side validation */
@@ -241,7 +241,7 @@ export type Combine<T> = {
     [K in keyof BaseCombine<T>]: BaseCombine<T>[K];
 };
 /** Field metadata object containing field state, validation attributes, and nested field access methods. */
-export type Field<FieldShape, Metadata extends Record<string, unknown> = DefaultFieldMetadata<unknown>> = Readonly<Metadata & {
+export type FieldMetadata<FieldShape, Metadata extends Record<string, unknown> = DefaultMetadata<unknown>> = Readonly<Metadata & {
     /** Unique key for React list rendering (for array fields). */
     key: string | undefined;
     /** The field name path exactly as provided. */
@@ -251,17 +251,17 @@ export type Field<FieldShape, Metadata extends Record<string, unknown> = Default
         FieldShape
     ] extends [Record<string, unknown> | null | undefined] ? FieldShape : unknown, Metadata>;
     /** Method to get array of fields for list/array fields under this field. */
-    getFieldList(): Array<Field<[
+    getFieldList(): Array<FieldMetadata<[
         FieldShape
     ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, Metadata>>;
 }>;
 /** Fieldset object containing all form fields as properties with their respective field metadata. */
 export type Fieldset<FieldShape, // extends Record<string, unknown>,
-FieldMetadata extends Record<string, unknown>> = {
-    [Key in keyof Combine<FieldShape>]-?: Field<Combine<FieldShape>[Key], FieldMetadata>;
+Metadata extends Record<string, unknown>> = {
+    [Key in keyof Combine<FieldShape>]-?: FieldMetadata<Combine<FieldShape>[Key], Metadata>;
 };
 /** Form-level metadata and state object containing validation status, errors, and field access methods. */
-export type FormMetadata<ErrorShape, FieldMetadata extends Record<string, unknown> = DefaultFieldMetadata<ErrorShape>> = Readonly<{
+export type FormMetadata<ErrorShape, Metadata extends Record<string, unknown> = DefaultMetadata<ErrorShape>> = Readonly<{
     /** Unique identifier that changes on form reset */
     key: string;
     /** The form's unique identifier. */
@@ -291,18 +291,18 @@ export type FormMetadata<ErrorShape, FieldMetadata extends Record<string, unknow
     /** The current state of the form */
     context: FormContext<ErrorShape>;
     /** Method to get metadata for a specific field by name. */
-    getField<FieldShape>(name: FieldName<FieldShape>): Field<FieldShape, FieldMetadata>;
+    getField<FieldShape>(name: FieldName<FieldShape>): FieldMetadata<FieldShape, Metadata>;
     /** Method to get a fieldset object for nested object fields. */
     getFieldset<FieldShape>(name: FieldName<FieldShape>): Fieldset<[
         FieldShape
-    ] extends [Record<string, unknown> | null | undefined] ? FieldShape : unknown, FieldMetadata>;
+    ] extends [Record<string, unknown> | null | undefined] ? FieldShape : unknown, Metadata>;
     /** Method to get an array of field objects for array fields. */
-    getFieldList<FieldShape>(name: FieldName<FieldShape>): Array<Field<[
+    getFieldList<FieldShape>(name: FieldName<FieldShape>): Array<FieldMetadata<[
         FieldShape
-    ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, FieldMetadata>>;
+    ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, Metadata>>;
 }>;
 /** Default field metadata object containing field state, validation attributes, and accessibility IDs. */
-export type DefaultFieldMetadata<ErrorShape> = Readonly<ValidationAttributes & {
+export type DefaultMetadata<ErrorShape> = Readonly<ValidationAttributes & {
     /** The field's unique identifier, automatically generated as {formId}-field-{fieldName}. */
     id: string;
     /** Auto-generated ID for associating field descriptions via aria-describedby. */

package/dist/future/util.d.ts

@@ -1,5 +1,5 @@
 import type { FormError } from '@conform-to/dom/future';
-import { StandardSchemaV1 } from '@standard-schema/spec';
+import type { StandardSchemaV1 } from './standard-schema';
 import { ValidateHandler, ValidateResult } from './types';
 export declare function isUndefined(value: unknown): value is undefined;
 export declare function isString(value: unknown): value is string;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -41,7 +41,7 @@
     "url": "https://github.com/edmundhung/conform/issues"
   },
   "dependencies": {
-    "@conform-to/dom": "1.9.1"
+    "@conform-to/dom": "1.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",
@@ -50,7 +50,6 @@
     "@babel/preset-typescript": "^7.20.2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@standard-schema/spec": "^1.0.0",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.3.5",
     "react": "^18.2.0",