@conform-to/react - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0-pre.0

context.d.ts

@@ -57,5 +57,5 @@ import { type Constraint, type Combine, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type FormOptions as BaseFormOptions } from '@conform-to/dom';
 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> & {
@@ -62,0 +62,0 @@ /**

context.js

@@ -69,5 +69,6 @@ 'use strict';
 }
-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({
@@ -112,3 +113,3 @@ id,
           if (typeof key === 'string') {
-            return getFieldMetadata(formId, state, subjectRef, name, key);
+            return getFieldMetadata(context, subjectRef, stateSnapshot, name, key);
           }
@@ -121,14 +122,19 @@ return Reflect.get(target, key, receiver);
     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;
+        }
       }
@@ -139,13 +145,14 @@ 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':
@@ -165,7 +172,9 @@ case 'minLength':
               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));
             };
@@ -178,6 +187,7 @@ }
 }
-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) {
@@ -216,7 +226,9 @@ case 'context':
       var result = context.submit(submitEvent);
-      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
+      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 {
         event.preventDefault();
-      } else {
-        var _onSubmit;
-        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
       }
@@ -223,0 +235,0 @@ },

hooks.d.ts

@@ -26,3 +26,3 @@ import { type FormId, type FieldName } from '@conform-to/dom';
 ];
-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;
@@ -29,0 +29,0 @@ }): FormMetadata<Schema, FormError>;

hooks.js

@@ -43,2 +43,3 @@ 'use strict';
   useSafeLayoutEffect(() => {
+    var disconnect = context$1.observe();
     document.addEventListener('input', context$1.onInput);
@@ -48,2 +49,3 @@ document.addEventListener('focusout', context$1.onBlur);
     return () => {
+      disconnect();
       document.removeEventListener('input', context$1.onInput);
@@ -60,5 +62,5 @@ document.removeEventListener('focusout', context$1.onBlur);
   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()];
@@ -70,5 +72,5 @@ }
   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);
 }
@@ -79,5 +81,5 @@ function useField(name) {
   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];
@@ -84,0 +86,0 @@ }

package.json

@@ -6,3 +6,3 @@ {
 	"license": "MIT",
-	"version": "1.0.6",
+	"version": "1.1.0-pre.0",
 	"main": "index.js",
@@ -34,3 +34,3 @@ "module": "index.mjs",
 	"dependencies": {
-		"@conform-to/dom": "1.0.6"
+		"@conform-to/dom": "1.1.0-pre.0"
 	},
@@ -37,0 +37,0 @@ "devDependencies": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90178

1.68%

Lines of code

2136

1.33%

Worsened metrics

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  @conform-to/dom@1.1.0-pre.0
  (transitive)

• - Removed

  @conform-to/dom@1.0.6
  (transitive)

• Updated

  @conform-to/dom@1.1.0-pre.0