@conform-to/react 1.0.5 → 1.1.0-pre.0

package/README

@@ -8,7 +8,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.4 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.1.0-pre.0 / License MIT / Copyright (c) 2024 Edmund Hung
 
 A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
 

package/context.d.ts

@@ -54,9 +54,9 @@ export declare function FormStateInput(props: {
 }): React.ReactElement;
 export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
 export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
-export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
-export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
-export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, FormValue>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
+export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(context: FormContext<Schema, FormError, FormValue>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
 export type FormOptions<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = BaseFormOptions<Schema, FormError, FormValue> & {
     /**
      * A function to be called before the form is submitted.

package/context.js

@@ -66,9 +66,10 @@ function updateSubjectRef(ref, name, subject, scope) {
     });
   }
 }
-function getMetadata(formId, state, subjectRef) {
+function getMetadata(context, subjectRef, stateSnapshot) {
   var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var id = name ? "".concat(formId, "-").concat(name) : formId;
+  var id = name ? "".concat(context.formId, "-").concat(name) : context.formId;
+  var state = context.getState();
   return new Proxy({
     id,
     name,
@@ -108,7 +109,7 @@ function getMetadata(formId, state, subjectRef) {
       return () => new Proxy({}, {
         get(target, key, receiver) {
           if (typeof key === 'string') {
-            return getFieldMetadata(formId, state, subjectRef, name, key);
+            return getFieldMetadata(context, subjectRef, stateSnapshot, name, key);
           }
           return Reflect.get(target, key, receiver);
         }
@@ -116,34 +117,40 @@ function getMetadata(formId, state, subjectRef) {
     }
   }, {
     get(target, key, receiver) {
-      switch (key) {
-        case 'key':
-        case 'initialValue':
-        case 'value':
-        case 'valid':
-        case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
-          break;
-        case 'errors':
-        case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
-          break;
+      // We want to minize re-render by identifying whether the field is used in a callback only
+      // but there is no clear way to know if it is accessed during render or not
+      // if the stateSnapshot is not the latest, then it must be accessed in a callback
+      if (state === stateSnapshot) {
+        switch (key) {
+          case 'key':
+          case 'initialValue':
+          case 'value':
+          case 'valid':
+          case 'dirty':
+            updateSubjectRef(subjectRef, name, key, 'name');
+            break;
+          case 'errors':
+          case 'allErrors':
+            updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
+            break;
+        }
       }
       return Reflect.get(target, key, receiver);
     }
   });
 }
-function getFieldMetadata(formId, state, subjectRef) {
+function getFieldMetadata(context, subjectRef, stateSnapshot) {
   var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   var key = arguments.length > 4 ? arguments[4] : undefined;
   var name = typeof key === 'undefined' ? prefix : dom.formatPaths([...dom.getPaths(prefix), key]);
-  var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy({}, {
     get(_, key, receiver) {
       var _state$constraint$nam;
+      var metadata = getMetadata(context, subjectRef, stateSnapshot, name);
+      var state = context.getState();
       switch (key) {
         case 'formId':
-          return formId;
+          return context.formId;
         case 'required':
         case 'minLength':
         case 'maxLength':
@@ -158,11 +165,13 @@ function getFieldMetadata(formId, state, subjectRef) {
             return () => {
               var _state$initialValue$n;
               var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
-              updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              if (state === stateSnapshot) {
+                updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              }
               if (!Array.isArray(initialValue)) {
                 throw new Error('The initial value at the given name is not a list');
               }
-              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(formId, state, subjectRef, name, index));
+              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(context, subjectRef, stateSnapshot, name, index));
             };
           }
       }
@@ -170,10 +179,11 @@ function getFieldMetadata(formId, state, subjectRef) {
     }
   });
 }
-function getFormMetadata(formId, state, subjectRef, context, noValidate) {
-  var metadata = getMetadata(formId, state, subjectRef);
+function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
   return new Proxy({}, {
     get(_, key, receiver) {
+      var metadata = getMetadata(context, subjectRef, stateSnapshot);
+      var state = context.getState();
       switch (key) {
         case 'context':
           return {
@@ -207,11 +217,13 @@ function createFormContext(options) {
     submit(event) {
       var submitEvent = event.nativeEvent;
       var result = context.submit(submitEvent);
-      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
-        event.preventDefault();
+      if (!result.submission || result.submission.status === 'success' || result.submission.error === null) {
+        if (!result.formData.has(dom.INTENT)) {
+          var _onSubmit;
+          (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        }
       } else {
-        var _onSubmit;
-        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        event.preventDefault();
       }
     },
     onUpdate(options) {

package/context.mjs

@@ -1,5 +1,5 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { STATE, formatPaths, getPaths, unstable_createFormContext, isPrefix } from '@conform-to/dom';
+import { STATE, formatPaths, getPaths, unstable_createFormContext, INTENT, isPrefix } from '@conform-to/dom';
 import { useContext, useMemo, createContext, useCallback, useSyncExternalStore, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -62,9 +62,10 @@ function updateSubjectRef(ref, name, subject, scope) {
     });
   }
 }
-function getMetadata(formId, state, subjectRef) {
+function getMetadata(context, subjectRef, stateSnapshot) {
   var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var id = name ? "".concat(formId, "-").concat(name) : formId;
+  var id = name ? "".concat(context.formId, "-").concat(name) : context.formId;
+  var state = context.getState();
   return new Proxy({
     id,
     name,
@@ -104,7 +105,7 @@ function getMetadata(formId, state, subjectRef) {
       return () => new Proxy({}, {
         get(target, key, receiver) {
           if (typeof key === 'string') {
-            return getFieldMetadata(formId, state, subjectRef, name, key);
+            return getFieldMetadata(context, subjectRef, stateSnapshot, name, key);
           }
           return Reflect.get(target, key, receiver);
         }
@@ -112,34 +113,40 @@ function getMetadata(formId, state, subjectRef) {
     }
   }, {
     get(target, key, receiver) {
-      switch (key) {
-        case 'key':
-        case 'initialValue':
-        case 'value':
-        case 'valid':
-        case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
-          break;
-        case 'errors':
-        case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
-          break;
+      // We want to minize re-render by identifying whether the field is used in a callback only
+      // but there is no clear way to know if it is accessed during render or not
+      // if the stateSnapshot is not the latest, then it must be accessed in a callback
+      if (state === stateSnapshot) {
+        switch (key) {
+          case 'key':
+          case 'initialValue':
+          case 'value':
+          case 'valid':
+          case 'dirty':
+            updateSubjectRef(subjectRef, name, key, 'name');
+            break;
+          case 'errors':
+          case 'allErrors':
+            updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
+            break;
+        }
       }
       return Reflect.get(target, key, receiver);
     }
   });
 }
-function getFieldMetadata(formId, state, subjectRef) {
+function getFieldMetadata(context, subjectRef, stateSnapshot) {
   var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   var key = arguments.length > 4 ? arguments[4] : undefined;
   var name = typeof key === 'undefined' ? prefix : formatPaths([...getPaths(prefix), key]);
-  var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy({}, {
     get(_, key, receiver) {
       var _state$constraint$nam;
+      var metadata = getMetadata(context, subjectRef, stateSnapshot, name);
+      var state = context.getState();
       switch (key) {
         case 'formId':
-          return formId;
+          return context.formId;
         case 'required':
         case 'minLength':
         case 'maxLength':
@@ -154,11 +161,13 @@ function getFieldMetadata(formId, state, subjectRef) {
             return () => {
               var _state$initialValue$n;
               var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
-              updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              if (state === stateSnapshot) {
+                updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              }
               if (!Array.isArray(initialValue)) {
                 throw new Error('The initial value at the given name is not a list');
               }
-              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(formId, state, subjectRef, name, index));
+              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(context, subjectRef, stateSnapshot, name, index));
             };
           }
       }
@@ -166,10 +175,11 @@ function getFieldMetadata(formId, state, subjectRef) {
     }
   });
 }
-function getFormMetadata(formId, state, subjectRef, context, noValidate) {
-  var metadata = getMetadata(formId, state, subjectRef);
+function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
   return new Proxy({}, {
     get(_, key, receiver) {
+      var metadata = getMetadata(context, subjectRef, stateSnapshot);
+      var state = context.getState();
       switch (key) {
         case 'context':
           return {
@@ -203,11 +213,13 @@ function createFormContext(options) {
     submit(event) {
       var submitEvent = event.nativeEvent;
       var result = context.submit(submitEvent);
-      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
-        event.preventDefault();
+      if (!result.submission || result.submission.status === 'success' || result.submission.error === null) {
+        if (!result.formData.has(INTENT)) {
+          var _onSubmit;
+          (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        }
       } else {
-        var _onSubmit;
-        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        event.preventDefault();
       }
     },
     onUpdate(options) {

package/hooks.d.ts

@@ -23,7 +23,7 @@ export declare function useForm<Schema extends Record<string, any>, FormValue =
     FormMetadata<Schema, FormError>,
     ReturnType<FormMetadata<Schema, FormError>['getFieldset']>
 ];
-export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, options?: {
+export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId?: FormId<Schema, FormError>, options?: {
     defaultNoValidate?: boolean;
 }): FormMetadata<Schema, FormError>;
 export declare function useField<FieldSchema, FormSchema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]>(name: FieldName<FieldSchema, FormSchema, FormError>, options?: {

package/hooks.js

@@ -40,10 +40,12 @@ function useForm(options) {
     formId
   })));
   useSafeLayoutEffect(() => {
+    var disconnect = context$1.observe();
     document.addEventListener('input', context$1.onInput);
     document.addEventListener('focusout', context$1.onBlur);
     document.addEventListener('reset', context$1.onReset);
     return () => {
+      disconnect();
       document.removeEventListener('input', context$1.onInput);
       document.removeEventListener('focusout', context$1.onBlur);
       document.removeEventListener('reset', context$1.onReset);
@@ -55,26 +57,26 @@ function useForm(options) {
     }));
   });
   var subjectRef = context.useSubjectRef();
-  var state = context.useFormState(context$1, subjectRef);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var form = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
+  var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = context.useSubjectRef();
   var context$1 = context.useFormContext(formId);
-  var state = context.useFormState(context$1, subjectRef);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return context.getFormMetadata(context$1.formId, state, subjectRef, context$1, noValidate);
+  return context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
 }
 function useField(name) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = context.useSubjectRef();
   var context$1 = context.useFormContext(options.formId);
-  var state = context.useFormState(context$1, subjectRef);
-  var field = context.getFieldMetadata(context$1.formId, state, subjectRef, name);
-  var form = context.getFormMetadata(context$1.formId, state, subjectRef, context$1, false);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
+  var field = context.getFieldMetadata(context$1, subjectRef, stateSnapshot, name);
+  var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, false);
   return [field, form];
 }
 

package/hooks.mjs

@@ -36,10 +36,12 @@ function useForm(options) {
     formId
   })));
   useSafeLayoutEffect(() => {
+    var disconnect = context.observe();
     document.addEventListener('input', context.onInput);
     document.addEventListener('focusout', context.onBlur);
     document.addEventListener('reset', context.onReset);
     return () => {
+      disconnect();
       document.removeEventListener('input', context.onInput);
       document.removeEventListener('focusout', context.onBlur);
       document.removeEventListener('reset', context.onReset);
@@ -51,26 +53,26 @@ function useForm(options) {
     }));
   });
   var subjectRef = useSubjectRef();
-  var state = useFormState(context, subjectRef);
+  var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var form = getFormMetadata(formId, state, subjectRef, context, noValidate);
+  var form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = useSubjectRef();
   var context = useFormContext(formId);
-  var state = useFormState(context, subjectRef);
+  var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return getFormMetadata(context.formId, state, subjectRef, context, noValidate);
+  return getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
 }
 function useField(name) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = useSubjectRef();
   var context = useFormContext(options.formId);
-  var state = useFormState(context, subjectRef);
-  var field = getFieldMetadata(context.formId, state, subjectRef, name);
-  var form = getFormMetadata(context.formId, state, subjectRef, context, false);
+  var stateSnapshot = useFormState(context, subjectRef);
+  var field = getFieldMetadata(context, subjectRef, stateSnapshot, name);
+  var form = getFormMetadata(context, subjectRef, stateSnapshot, false);
   return [field, form];
 }
 

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.5",
+	"version": "1.1.0-pre.0",
 	"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": "1.0.5"
+		"@conform-to/dom": "1.1.0-pre.0"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",